[create-inula]<feat> 新增响应式 API 模板

2023-12-01 12:15:24 +08:00 · 2023-12-01 12:15:24 +08:00 · cfd55220f8
parent 0dff459fcb
commit cfd55220f8
16 changed files with 537 additions and 1 deletions
--- a/packages/create-inula/lib/generators/Simple-reactive-app/index.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/index.js
@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const BasicGenerator = require('../../BasicGenerator');
+
+class Generator extends BasicGenerator {
+  prompting() {
+    return this.prompt([
+      {
+        type: 'list',
+        name: 'bundlerType',
+        message: 'Please select the build type',
+        choices: ['webpack', 'vite'],
+      },
+    ]).then(props => {
+      this.prompts = props;
+    });
+  }
+
+  writing() {
+    const src = this.templatePath(this.prompts.bundlerType);
+    const dest = this.destinationPath();
+    this.writeFiles(src, dest, {
+      context: {
+        ...this.prompts,
+      },
+    });
+  }
+}
+
+module.exports = Generator;
--- a/packages/create-inula/lib/generators/Simple-reactive-app/meta.json
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/meta.json
@ -0,0 +1,3 @@
+{
+  "description": "simple reactive app template."
+}
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/index.html
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/index.html
@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>My Inula App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/package.json
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/package.json
@ -0,0 +1,25 @@
+{
+  "name": "inula-vite-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "openinula": "0.0.0-experimental-20231201"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "babel-plugin-import": "^1.13.6",
+    "vite": "^4.2.1"
+  }
+}
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/ReactiveComponent.jsx
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/ReactiveComponent.jsx
@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula, { useComputed, useReactive, useRef } from 'openinula';
+
+function ReactiveComponent() {
+  const renderCount = ++useRef(0).current;
+
+  const data = useReactive({ count: 0 });
+  const countText = useComputed(() => {
+    return `计时: ${data.count.get()}`;
+  });
+
+  setInterval(() => {
+    data.count.set(c => c + 1);
+  }, 1000);
+
+  return (
+    <div>
+      <div>{countText}</div>
+      <div>组件渲染次数:{renderCount}</div>
+    </div>
+  );
+}
+
+export default ReactiveComponent;
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.css
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.css
@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Montserrat', sans-serif;
+  line-height: 1.6;
+  color: #fff;
+  background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3em;
+  margin-bottom: 20px;
+}
+
+.hero-subtitle {
+  font-size: 1.5em;
+  margin-bottom: 50px;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1vh;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  padding: 20px;
+  width: 100%;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+}
+
+.card h2,
+.card p {
+  color: #fff;
+}
+
+.card a {
+  color: #fff;
+  text-decoration: underline;
+}
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.jsx
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/src/index.jsx
@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import ReactiveComponent from './ReactiveComponent';
+import './index.css';
+
+function App() {
+  return (
+    <div class="container">
+      <div class="hero">
+        <h1 class="hero-title animate__animated animate__bounceInDown">欢迎来到 Inula 项目!</h1>
+        <p class="hero-subtitle animate__animated animate__bounceInUp">你已成功创建你的第一个响应式 Inula 项目</p>
+      </div>
+      <div className="content">
+        <div className="card animate__animated animate__zoomIn">
+          <ReactiveComponent/>
+        </div>
+      </div>
+      <div class="content">
+        <div class="card animate__animated animate__zoomIn">
+          <h2>了解更多</h2>
+          <p>
+            要了解 Inula，查看{' '}
+            <a href="https://openinula.com/" target="_blank">Inula 官网</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Inula.render(<App />, document.getElementById('root'));
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js
@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import react from '@vitejs/plugin-react';
+
+let alias = {
+  react: 'openinula', // 新增
+  'react-dom': 'openinula', // 新增
+  'react/jsx-dev-runtime': 'openinula/jsx-dev-runtime',
+};
+
+export default {
+  plugins: [react()],
+  resolve: {
+    alias,
+  },
+};
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json
@ -0,0 +1,29 @@
+{
+  "name": "inula-webpack-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode production"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "openinula": "0.0.0-experimental-20231201"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "style-loader": "^3.3.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.77.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2"
+  }
+}
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.js
@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import ReactiveComponent from './ReactiveComponent';
+import './styles.css';
+
+class App extends Inula.Component {
+  render() {
+    return (
+      <div class="container">
+        <div class="hero">
+          <h1 class="hero-title animate__animated animate__bounceInDown">欢迎来到 Inula 项目!</h1>
+          <p class="hero-subtitle animate__animated animate__bounceInUp">你已成功创建你的第一个响应式 Inula 项目</p>
+        </div>
+        <div className="content">
+          <div className="card animate__animated animate__zoomIn">
+            <ReactiveComponent/>
+          </div>
+        </div>
+        <div class="content">
+          <div class="card animate__animated animate__zoomIn">
+            <h2>了解更多</h2>
+          <p>
+            要了解 Inula，查看{' '}
+            <a href="https://openinula.org" target="_blank">Inula 官网</a>
+          </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.js
@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula, { useComputed, useReactive, useRef } from 'openinula';
+
+function ReactiveComponent() {
+  const renderCount = ++useRef(0).current;
+
+  const data = useReactive({ count: 0 });
+  const countText = useComputed(() => {
+    return `计时: ${data.count.get()}`;
+  });
+
+  setInterval(() => {
+    data.count.set(c => c + 1);
+  }, 1000);
+
+  return (
+    <div>
+      <div>{countText}</div>
+      <div>组件渲染次数:{renderCount}</div>
+    </div>
+  );
+}
+
+export default ReactiveComponent;
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html
@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Inula App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="../dist/bundle.js"></script>
+  </body>
+</html>
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.js
@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import App from './App';
+
+Inula.render(<App />, document.getElementById('root'));
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css
@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+}
+
+body,
+html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Montserrat', sans-serif;
+  line-height: 1.6;
+  color: #fff;
+  background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3em;
+  margin-bottom: 20px;
+}
+
+.hero-subtitle {
+  font-size: 1.5em;
+  margin-bottom: 50px;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 1vh;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  padding: 20px;
+  width: 100%;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+}
+
+.card h2,
+.card p {
+  color: #fff;
+}
+
+.card a {
+  color: #fff;
+  text-decoration: underline;
+}
--- a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js
@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              '@babel/preset-env',
+              [
+                '@babel/preset-react',
+                {
+                  runtime: 'automatic', // 新增
+                  importSource: 'openinula', // 新增
+                },
+              ],
+            ],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'images/',
+              publicPath: 'images/',
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: ['file-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'src/index.html'),
+      filename: 'index.html',
+    }),
+  ],
+  devServer: {
+    static: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 9000,
+    open: true,
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],
+  },
+};
--- a/packages/create-inula/package.json
+++ b/packages/create-inula/package.json
@ -1,6 +1,6 @@
 {
  "name": "create-inula",
-  "version": "0.0.3",
+  "version": "0.0.5",
  "description": "",
  "main": "index.js",
  "bin": {