About | Features | Technologies | Requirements | Starting | License | Author
Write your HTML or JSX in a seperate file and use Shadowfy to convert them into basic web components
This node module does not work ๐
We'll be publishing Shadowfy v0.3, beta version of Web component based web framework.๐
โ
JSX to Web Component
โ
HTML containers into their seperate light DOM component
The following tools were used in this project:
Before starting โ , you need to have Git and Node installed.
- Clone the repo from github
- Pass the following arguments
- src_dir : path to source directory
- out_dir : path to compiled directory
- Pass these arguments in the shadowfy or compiler function as an object
Shadowfy({
src_dir: "./path/to/src/dir",
out_dir: './path/to/out/dir'
})
- run the script
# Install dependencies
$ yarn add @babel/core @babel/preset-react --dev
# run the script
$ node shadowfy.js
- This will generate the compiled code to the given path.
Here's the structure of project so tha you can go and tweak the code:
shadowfy
โโ compilers
โ โโ compiler.js
โ โโ CompilerI.js
โ โโ templates.js
โโ ghost.png
โโ LICENSE
โโ package-lock.json
โโ package.json
โโ README.md
โโ router
โ โโ router.js
โโ shadowfy.js
- The compiler takes the BFS approach
- It reads files and dirs in first layer i.e "./src/"
- if a directory comes, it pushes the path in queue, else it compiles the file
CompilerI.js
โโ src
โโ out
โโ queue -> contains list of directories to compile next
โ โโ src -> src_dir
โ โโ out -> out_dir
โ โโ out_name -> name of out dir extracted from out_dir
โโ convert() -> initiate compilation
โโ dir_proc() -> create and push new queue item
โโ file_proc() -> read & compile a file
โโ register_proc() -> register a file as a web component
โโ compile_proc() -> implemented by children classes
โโ getName() -> extract dir name from path
This project is under license from MIT. For more details, see the LICENSE file.
Made with โค๏ธ by Suryansh