@asuka 405/shadowfy

🚧 @asuka−405/shadowfy 🚀 Under construction... 🚧

🎯 About

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.💕

✨ Features

✅ JSX to Web Component
✅ HTML containers into their seperate light DOM component

🚀 Technologies

The following tools were used in this project:

☑️ Requirements

Before starting ✅, you need to have Git and Node installed.

🧪 Sample execution

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.

⚙️ Tweak the code

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

📝 License

This project is under license from MIT. For more details, see the LICENSE file.

Made with ❤️ by Suryansh