Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
boostact - npm Package Compare versions
Comparing version 1.3.0 to 1.3.1
| { | ||
| "name": "boostact", | ||
| "version": "1.3.0", | ||
| "version": "1.3.1", | ||
| "main": "index.js", | ||
@@ -5,0 +5,0 @@ "scripts": { |
207
README.md
| # Boostact | ||
| - [Boostact를 사용하여 만든 Boostact document (제작 중)](https://boostact.github.io/) | ||
| - [Boostact npm adress](https://www.npmjs.com/package/boostact) | ||
| # WHAT | ||
| | ||
| **부스트액트**는 **순수 자바스크립트**를 사용하여 만든 웹 프레임워크입니다. | ||
| | ||
| 리액트 공식 문서를 포함하여 많은 곳에 리액트를 다루는 법이 설명되어 있지만, 리액트 내부 구조를 설명한 내용은 많지 않습니다. 그래서 우리 팀은 **리액트 재설계**를 도전했습니다. | ||
| Boostact는 이런 배경에서 탄생한 결과물입니다. | ||
| | ||
| Boostact는 React에 비하면 매우 작은 사이즈고, 또한 성능 면에서도 밀리겠지만, 그렇기 때문에 **자바스크립트를 아는 개발자라면 리액트를 이해하는 데에 큰 도움**이 될 거라 생각합니다. 또, 리액트 뿐만 아니라 웹 프레임워크를 이해하는 데에도 도움이 될 것입니다. | ||
| | ||
| 여기서는 어떻게 Boostact를 사용해볼 수 있는지 간단하게 설명하려고 합니다. | ||
| | ||
| 아래를 읽어주시기 바랍니다. | ||
| | ||
| | ||
| | ||
| # Getting start | ||
| | ||
| ## install | ||
| | ||
| Boostact 모듈을 사용하기 위해서는 webpack과 babel이 필수적으로 필요합니다. 따라서 아래의 devDependencies를 모두 추가해주시기 바랍니다. | ||
| | ||
| ### 프로젝트 생성 | ||
| | ||
| ```bash | ||
| mkdir projectFolder | ||
| npm init -y | ||
| npm install boostact | ||
| ``` | ||
| | ||
| ### 바벨 설치 | ||
| | ||
| ```bash | ||
| npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/preset-react --save-dev | ||
| ``` | ||
| | ||
| ### 웹팩 설치 | ||
| | ||
| ```bash | ||
| npm install webpack webpack-cli webpack-dev-server --save-dev | ||
| npm install html-webpack-plugin mini-css-extract-plugin --save-dev | ||
| ``` | ||
| | ||
| 이제 package.json에서 webpack 실행 명령어를 만들어주시면 됩니다. | ||
| 아래는 .babelrc file과 webpack.config.js file 입니다. | ||
| | ||
| ### .babelrc | ||
| | ||
| ```bash | ||
| { | ||
| "presets": ["@babel/preset-env", "@babel/preset-react"] | ||
| } | ||
| | ||
| ``` | ||
| | ||
| **webpack.config.js** | ||
| | ||
| ```bash | ||
| const HtmlWebpackPlugin = require("html-webpack-plugin"); | ||
| const path = require("path"); | ||
| | ||
| module.exports = { | ||
| mode: "development", | ||
| entry: { | ||
| index: ["@babel/polyfill", "./index.js"], | ||
| }, | ||
| output: { | ||
| path: path.join(__dirname, "dist"), | ||
| filename: "bundle.js", | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.(js|jsx)$/, | ||
| use: "babel-loader", | ||
| exclude: /node_modules/, | ||
| }, | ||
| ], | ||
| }, | ||
| devServer: { | ||
| host: "127.0.0.1", | ||
| contentBase: path.join(__dirname, "/dist"), | ||
| compress: true, | ||
| hot: true, | ||
| inline: true, | ||
| port: 9000, | ||
| open: true, | ||
| }, | ||
| resolve: { | ||
| extensions: [".js", ".jsx"], | ||
| }, | ||
| plugins: [ | ||
| new HtmlWebpackPlugin({ | ||
| title: "index", | ||
| hash: true, | ||
| chunks: ["index"], | ||
| filename: "index.html", | ||
| template: "./index.html", | ||
| }), | ||
| ], | ||
| }; | ||
| | ||
| ``` | ||
| | ||
| | ||
| | ||
| | ||
| | ||
| ### index.html | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <body> | ||
| <div id="root"></div> | ||
| </body> | ||
| <script type="module" src="index.jsx"></script> | ||
| | ||
| ``` | ||
| | ||
| | ||
| | ||
| ### index.js | ||
| ```javascript | ||
| import { Boostact } from "boostact"; | ||
| import App from "./App"; | ||
| /** @jsx Boostact.createElement */ | ||
| | ||
| const root = document.getElementById("root"); | ||
| Boostact.render(<App />, root); | ||
| ``` | ||
| | ||
| ### App.js | ||
| ```javascript | ||
| import { Boostact } from "boostact"; | ||
| /** @jsx Boostact.createElement */ | ||
| | ||
| const App = () => { | ||
| return ( | ||
| <div> | ||
| <h1>Hello!</h1> | ||
| <h2>This is Boostact!</h2> | ||
| </div> | ||
| ); | ||
| }; | ||
| | ||
| export default App; | ||
| | ||
| ``` | ||
| | ||
| 여기까지로 모든 사용법 설명이 끝났습니다. 주의할 점은 babel이 jsx를 React.createElement가 아닌 Boostact.createElement로 파싱을 하게끔, 아래의 jsDoc을 추가해야 한다는 점입니다. | ||
| | ||
| ### jsdoc (essential) | ||
| ```js | ||
| /** @jsx Boostact.createElement/ | ||
| ``` | ||
| ## contributor | ||
| - [kakasoo](https://github.com/kakasoo) | ||
| - [ji3427](https://github.com/ji3427) | ||
| - [seunghyoKu](https://github.com/SeunghyoKu) | ||
| - [simjaeik](https://github.com/simjaeik) | ||
| # Boostact | ||
| **Boostact** is a **web framework** created using vanilla JavaScript. | ||
@@ -147,1 +347,8 @@ There are many descriptions of how to deal with React, including official documents. However, it is difficult to understand the principle of react deeply with simple examples and explanations. To overcome this, we've tried to **redesign React.** | ||
| ``` | ||
| ## contributor | ||
| - [kakasoo](https://github.com/kakasoo) | ||
| - [ji3427](https://github.com/ji3427) | ||
| - [seunghyoKu](https://github.com/SeunghyoKu) | ||
| - [simjaeik](https://github.com/simjaeik) |
| class EventModule { | ||
| constructor() { | ||
| this.eventNode = new Array(); | ||
| } | ||
| add(vNode) { | ||
| if (!vNode.dom) return; | ||
| if (this.eventNode.some((node) => node.dom.isEqualNode(vNode.dom))) return; | ||
| this.eventNode.push(vNode); | ||
| } | ||
| clear() { | ||
| this.eventNode.length = 0; | ||
| } | ||
| eventCall(event) { | ||
| const targetNode = this.eventNode.find((node) => node.dom.isEqualNode(event.target)); | ||
| const eventType = `on${this.capitalize(event.type)}`; | ||
| const handler = targetNode && targetNode.props && targetNode.props[eventType]; | ||
| if (typeof handler === "function") handler(event); | ||
| } | ||
| capitalize(str) { | ||
| return str.charAt(0).toUpperCase() + str.slice(1); | ||
| } | ||
| constructor(){ | ||
| this.eventNode = []; | ||
| } | ||
| add(vNode){ | ||
| if(!vNode.dom) return; | ||
| if(this.eventNode.some((node) => node.dom.isEqualNode(vNode.dom))) return; | ||
| this.eventNode.push(vNode); | ||
| } | ||
| clear(){ | ||
| this.eventNode.length = 0; | ||
| } | ||
| eventCall(event){ | ||
| const handlers = []; | ||
| event.path.forEach((element,index) => { | ||
| if(index > event.path.length - 2) return; | ||
| const targetNode = this.eventNode.find((node) => node.dom.isEqualNode(element)); | ||
| const eventType = `on${this.capitalize(event.type)}` | ||
| const eventType = `on${this.capitalize(event.type)}` | ||
| const eventType = `on${this.capitalize(event.type)}` | ||
| const handler = targetNode && targetNode.props && targetNode.props[eventType]; | ||
| if(typeof handler === "function") | ||
| handlers.push(handler); | ||
| }) | ||
| handlers.forEach((handler) => handler(event)); | ||
| } | ||
| capitalize(str){ | ||
| return str.charAt(0).toUpperCase() + str.slice(1); | ||
| } | ||
| } | ||
| export default new EventModule(); | ||
| export default new EventModule; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.58%
28224
- Lines of code
- increased by1.54%
529
- Number of lines in readme file
- increased by140.82%
354
No dependency changes