jp-weld v0.2.9
jp-weld
Weld is a minimalistic component framework and web compiler for simpler frontend web applications.
Just a side project that kind of got started while building something else, so decided to export it into its own thing.
Install
npm i -D jp-weld
Setup
weldconfig.json
Create a weldconfig.json
in the root directory of your project. It is optional but currently supports the following settings:
{
"input": "src",
"output": "dist",
"netlify": {
"_redirects": false
}
}
input
specifies the path you wish to use the root of your project. Default is src
.output
specifies the path to which you wish to compile your project. Default is dist
._redirects
tells Weld to look for a netlify _redirects file and copy it to your output directory on compilation. Default is false
.
Boilerplate
Initialize a boilderplate by running npx weld init
.
Usage
In your project root folder you need this folder structure:
|-- /src
|-- /assets (will be exported as is)
|-- index.html (requires a <div class="root"></div> in the body tag)
|-- root.html (inject first parent component here)
|-- script.js
|-- style.css
|-- /Components
|-- /ComponentName
|-- ComponentName.html
|-- ComponentName.js
|-- ComponentName.css
Weld is also directory agnostic, meaning you can put any component in any sub directory inside /components.
Components must be injected in each html as <ComponentName />
, using the same name as the file.
Initiating the boilerplate explained above will help you understand how it works.
Routing
Rudimentary routing is now added, VERY beta and untested at the moment:
- In the component HTML, on the wrapping tag, add a
data-routecomponent="ComponentName"
attribute to it. - Wherever you wish to load this, add the component as
<Route component="ComponentName" />
. - If you wish for a route to load immediately on page load, you add
DefaultRoute
to the Route tag -<Route component="ComponentName" DefaultRoute />
. - In the element you wish to use as link, put a
loadComponent="ComponentName"
attribute to it. This will be replaced with an onclick-function. - To run specific code on route load, wrap it all in a function called
ComponentName
(it will be called after html loads). - Loading one route will hide all the other.
- No parameter handling is available at the moment.
- This is not added to the boilerplate yet but that's in the works.
Compiling
- Run
npx weld build
to build and compile your app and to a singleindex.html
,script.js
andstyle.css
and if provided/assets
to your output directory.
Development
WIP - Slice 3
- Improve routing
- Implement further error handling (pretty much none atm...)
- Allow for some kind of data-binding to make components more flexible and reusable
- More config settings: Make files to copy on compilation generic.
- Suggestions?
✔ Added Routing
Complete
Slice 2
- Rewrite project in TS
- Initiating project boilerplate by running
npx weld init
- Support for custom folder structure inside /components
- Make config to enable custom things like input and output directories
- Started off graceful error handling on the congfig file.
Slice 1
- Develop basic but working component system
- Implement compiling functionality