Wape

Web Application Page Editor

🚧 Work in progress project
Build website without coding, drag and drop elements and layouts on the page, responsive pages, different devices preview while building, export page as html/css or save content and provide access to it with an hosted api.
Offers different layouts and html predefined blocks.
Save portions of the page to re-use it in other pages (personnal block library)
Edit content, images, links, social buttons, ....
Add custom blocks and CSS styles

Usage

<div id="editor"></div>

<script type="text/javascript">
    new Wape({
        el: "#editor"
    });
</script>

Roadmap

• Use Tailwind in iframe
• Mitt event emmiter to remove $on
• Don't rely on fontawesome cdn but serve it from here
• Do not use templates.js
• Make editor layouts (containers, layouts (DROPPABLE TARGETS))
• Make editor elements (html elements (no forms elements for now))
• Change bulma for utility framework and extend it for the editor use (tailwindcss)
• Make the cloned element visible and with an opacity of .5 place it where it would be dropped if mouse is released
• Make responsive previews

Back after a long break on the project

• Migrate from webpack to rollup

• @rollup/plugin-alias for import path aliases and config

• rollup-plugin-vue for Vuejs SFC compilation

• rollup-plugin-terser and condition to minify bundle for production builds

• rollup-plugin-serve and condition to serve when using rollup watch

• @rollup/plugin-node-resolve to resolve node_modules depencies such as Vue, Lodash, Mitt, ...

• @rollup/plugin-commonjs to resolve commonjs exported modules (like lodash/isEmpty is using module.exports = isEmpty;)

• @rollup/plugin-replace to fix process is not defined error (replaces 'process.env.NODE_ENV' with 'development')

• rollup-plugin-postcss to import css in js and extract it to a file in /dist folder

• rollup-plugin-copy to copy fontawesome folder to dist

• Remove Rollup Html Plugin and Rollup Postcss plugin it's not doing what i want

• Find solution for iframe.css / using rollup-plugin-copy for now

• Fix JS errors

• Add postcss directly and handle css /dist output and minification in npm scripts

• Make postcss / http-server / rollup build work together with npm scripts and npm-run-all

• Upgrade tailwind to last version and use npm package with postcss install

• Clean the place : src/app/config folder if not used / old config files / webpack.config.js file / editor DragDrop, DragDropApi, DragDrop if not used / Js classes not used

• Add support for custom CSS in editor (allow adding classes to elements once custom css is loaded in iframe)

• Make settings customisation for components and elements (html attributes mostly (id / class / ...)) => Depends on component/element

• Refactor a lot dragger class and especially RenderShadowElement function which is a big mess (+100 lines)

• Review and maybe change the layouts.js / elements.js organization for clarity

• Make style customisation for components and elements (css properties like display / borders / bg colors / text color / font size, weight, family / text alignment / line height, letter spacing, margin for blocks / padding for blocks / ...) => Depends on component/element maybe generate a combination of corresponding css classes to add to the element while customizing it (tailwind would be good for this)

• Undo / Redo action

• Make structure of the page view (maybe switch to it when dragging something in the page)

• Make code exporting (full page or body only)

• Make save options (Option to host final template in a personnal library provided by an API)

• Ability to save parts of a template (like grouping elements)

• Learn Jest