boostact - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

package.json

 {
   "name": "boostact",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "main": "index.js",
@@ -32,3 +32,2 @@ "scripts": {
     "highlight.js": "^10.4.1",
-    "file-loader": "^6.2.0",
     "jss": "^10.5.0",
@@ -35,0 +34,0 @@ "jss-preset-default": "^10.5.0"

README.md

@@ -0,1 +1,3 @@
+# 공식문서
+
 # Boostact
@@ -8,32 +10,21 @@
 
-​
-**부스트액트**는 **순수 자바스크립트**를 사용하여 만든 웹 프레임워크입니다.  
-​
-리액트 공식 문서를 포함하여 많은 곳에 리액트를 다루는 법이 설명되어 있지만, 리액트 내부 구조를 설명한 내용은 많지 않습니다. 그래서 우리 팀은 **리액트 재설계**를 도전했습니다.  
-Boostact는 이런 배경에서 탄생한 결과물입니다.  
-​  
-Boostact는 React에 비하면 매우 작은 사이즈고, 또한 성능 면에서도 밀리겠지만, 그렇기 때문에 **자바스크립트를 아는 개발자라면 리액트를 이해하는 데에 큰 도움**이 될 거라 생각합니다. 또, 리액트 뿐만 아니라 웹 프레임워크를 이해하는 데에도 도움이 될 것입니다.  
- ​  
-여기서는 어떻게 Boostact를 사용해볼 수 있는지 간단하게 설명하려고 합니다.
-​  
- 아래를 읽어주시기 바랍니다.
-​
-​
-​
+**부스트액트**는 **순수 자바스크립트**만을 사용하여 만든 웹 프레임워크입니다.
 
+React 공식 문서를 포함한 많은 곳에 React를 다루는 법이 설명되어 있지만, React의 내부 구조를 설명한 곳은 많지 않았습니다. 그래서 저희 팀은 React의 내부 구조와 웹 프레임워크에 대한 더 깊은 기술적인 이해를 위해 **리액트 재설계**를 도전했습니다.
+
+Boostact는 React에 비해 사이즈가 작고, 성능 면에서도 더 뛰어나지 않습니다. 하지만, 분명 React와 매우 유사하게 동작합니다. 저희는 Boostact가 **자바스크립트를 아는 개발자들이 React를 이해하는 데에 큰 도움**이 될 것이라 생각합니니다. 더 나아가, 웹 프레임워크 전반을 이해하는 데에도 도움이 될 것입니다.
+
+아래에서는 어떻게 Boostact를 사용해볼 수 있는지 간단하게 설명하려고 합니다.
+
+자세한 사항은 [부스트액트 공식문서](https://boostact.github.io/)에서 확인해주시기 바랍니다.
+
 # Getting start
 
-​
-
 ## install
 
-​
-Boostact 모듈을 사용하기 위해서는 webpack과 babel이 필수적으로 필요합니다. 따라서 아래의 devDependencies를 모두 추가해주시기 바랍니다.  
-​
+Boostact 모듈을 사용하기 위해서는 webpack과 babel이 필수적으로 필요합니다. 따라서 아래의 devDependencies를 모두 추가해주시기 바랍니다.
 
 ### 프로젝트 생성
 
-​
-
-```bash
+```
 mkdir projectFolder
@@ -44,19 +35,11 @@ npm init -y
 
-​
-
 ### 바벨 설치
 
-​
-
-```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
@@ -66,26 +49,19 @@ npm install html-webpack-plugin mini-css-extract-plugin --save-dev
 
-​
-이제 package.json에서 webpack 실행 명령어를 만들어주시면 됩니다.  
-아래는 .babelrc file과 webpack.config.js file 입니다.  
- ​
+이제 package.json에서 webpack 실행 명령어를 만들어주시면 됩니다.
+아래는 .babelrc file과 webpack.config.js file 입니다.
 
 ### .babelrc
 
-​
-
-```bash
+```
 {
     "presets": ["@babel/preset-env", "@babel/preset-react"]
 }
-​
 ```
 
-​
 **webpack.config.js**
-​
 
-```bash
+```jsx
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const path = require("path");
-​
+
 module.exports = {
@@ -103,3 +79,3 @@ mode: "development",
             {
-                test: /\.(js|jsx)$/,
+                test: /\\.(js|jsx)$/,
                 use: "babel-loader",
@@ -132,11 +108,4 @@ exclude: /node_modules/,
 };
-​
 ```
 
-​
-​
-​
-​
-​
-
 ### index.html
@@ -150,16 +119,11 @@
 <script type="module" src="index.jsx"></script>
-​
 ```
 
-​
-​
-​
-
 ### index.js
 
-```javascript
+```jsx
 import { Boostact } from "boostact";
 import App from "./App";
 /** @jsx Boostact.createElement */
-​
+
 const root = document.getElementById("root");
@@ -169,10 +133,8 @@ Boostact.render(<App />, root);
 
-​
-
 ### App.js
 
-```javascript
+```jsx
 import { Boostact } from "boostact";
 /** @jsx Boostact.createElement */
-​
+
 const App = () => {
@@ -186,14 +148,11 @@ return (
 };
-​
+
 export default App;
-​
 ```
+여기까지 읽으셨다면, 여러분도 부스트액트를 사용하실 수 있습니다.
+주의할 점은 babel이 jsx를 React.createElement가 아닌 Boostact.createElement로 파싱을 하게끔, 아래의 jsDoc을 추가해야 한다는 점입니다.
 
-​
-여기까지로 모든 사용법 설명이 끝났습니다. 주의할 점은 babel이 jsx를 React.createElement가 아닌 Boostact.createElement로 파싱을 하게끔, 아래의 jsDoc을 추가해야 한다는 점입니다.  
- ​
-
 ### jsdoc (essential)
 
-```js
+```jsx
 /** @jsx Boostact.createElement/
@@ -231,3 +190,2 @@ ```
 npm install boostact
-
 ```
@@ -239,3 +197,2 @@
 npm install @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/preset-react --save-dev
-
 ```
@@ -248,8 +205,6 @@
 npm install html-webpack-plugin mini-css-extract-plugin --save-dev
-
 ```
 
 Now you can create a webpack run command in package.json!
-Below are .babelrc files and webpack.config.js files. You can modify it according to what you want.  
-**.babelrc**
+Below are .babelrc files and webpack.config.js files. You can modify it according to what you want.**.babelrc**
 
@@ -260,3 +215,2 @@ ```
 }
-
 ```
@@ -266,3 +220,3 @@
 
-```
+```jsx
 const HtmlWebpackPlugin = require("html-webpack-plugin");
@@ -310,3 +264,2 @@ const path = require("path");
 };
-
 ```
@@ -316,3 +269,3 @@
 
-```
+```html
 <!DOCTYPE html>
@@ -323,3 +276,2 @@ <body>
 <script type="module" src="index.jsx"></script>
-
 ```
@@ -329,3 +281,3 @@
 
-```
+```jsx
 import { Boostact } from "boostact";
@@ -336,3 +288,2 @@ import App from "./App";
 Boostact.render(<App />, root);
-
 ```
@@ -342,3 +293,3 @@
 
-```
+```jsx
 import { Boostact } from "boostact";
@@ -355,3 +306,2 @@ /** @jsx Boostact.createElement */
 export default App;
-
 ```
@@ -363,5 +313,4 @@
 
-```
+```jsx
 /** @jsx Boostact.createElement/
-
 ```
@@ -368,0 +317,0 @@

src/boostact/event.js

 class EventModule {
-    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);
-    }
+  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 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

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

22

decreased by-4.35%

Worsened metrics

Total package byte prevSize

27786

decreased by-1.08%

Lines of code

526

decreased by-0.57%

Number of lines in readme file

303

decreased by-14.41%

No dependency changes