tooljs-web v1.0.5
tooljs-web
This is a package that allows you to write functional components like reactjs, tooljs-web is essentially a string.
Wish you have a pleasant experience.
Author: Dang Duy Duc
Install
npm install tooljs-webUsage
You can start with a simple structured project by clone https://github.com/duyduc2003/start-with-tooljs-web.git or follow Quick start.
createStorecreate store management state of project.useSelectoraccess state of project.useDispatchdispatch data to store.connectStorelikeuseSelector, access state of project, this is a HOC.createRootused to render the interface
htmlused to write html as string in javascript and can insert javascript scripts.
...
Structure project
/node_module
/src
| ...
| |-- /store
| | |-- index.js
| | |-- action.js
| | |-- reducer.js
| | |-- constants.js
| |-- App.js
|-- index.html
|-- index.js
|-- tooljsWeb.js
...
package-lock.json
package.jsonQuick start
Step 1: File: ./index.html, add tag script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TOOLJS - WEB</title>
<!-- link script -->
<script defer type="module" src="./index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>Step 2: File ./src/store/reducer.js, create variable initState which is the initial value of state parameter of reducer function. In addition, the reducer function has two more parameters, type and action. Type is the case name, action is the action that the user submits data. Finally, we export method reducer.
// state initial
const initState = {
};
const reducer = (state = initState, type, action) => {
switch (type) {
case ...: // case name
return {
...state, // handling user-submitted data
...
}
default:
return state // If there are no instances, return state
}
}
export default reducer;Step 3: File ./tooljsWeb.js, import package tooljs-web, then export all out.
export * from './node_modules/tooljs-web/index.js'Step 4: File ./src/store/index.js, import createStore and put reducer in the argument of createStore. Finally export it all out.
// import `createStore`
import { createStore } from '../../tooljsWeb.js';
import reducer from './reducer.js';
export const { createRoot, useSelector, connectStore, useDispatch } = createStore(reducer);Step 5: File ./src/App.js, import html from tooljs-web, create functional component App.
import { html } from '../tooljsWeb.js'
const App = () => {
return html
`
<h1>HELLO TOOLJS-WEB</h1>
`
}
export default AppStep 6: File ./index.js, import App component, import createRoot and render them.
import App from './src/App.js';
import { createRoot } from './src/store/index.js';
const root = createRoot(document.getElementById('root'));
// render app
root.render(App);Step 7: Use extension Live Server, click Go Live below.
Result:
How to start project with tooljs-web and webpack
Step 1: In your IDE (Visual Studio Code), ctrl + shift + p, choose Git: clone then copy link github: https://github.com/duyduc2003/start-with-tooljs-web.git. And click Clone from URL
Step 2: Open project at position download and open them.
Step 3: open terminal and type npm install to download dependencies
Finally: type npm start