create-nodality-react 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/bin/index.js +79 -0
  2. package/package.json +14 -0
  3. package/readme.md +0 -0
  4. package/templates/index.html +11 -0
  5. package/templates/src/App.js +54 -0
  6. package/templates/src/index.js +6 -0
  7. package/templates/webpack.config.js +35 -0
package/bin/index.js ADDED
@@ -0,0 +1,79 @@
1
+ #!/usr/bin/env node
2
+
3
+ import { mkdirSync, writeFileSync, existsSync, copyFileSync } from "fs";
4
+ import { resolve, dirname } from "path";
5
+ import { execSync } from "child_process";
6
+ import { fileURLToPath } from "url";
7
+
8
+ const __filename = fileURLToPath(import.meta.url);
9
+ const __dirname = dirname(__filename);
10
+
11
+ function copyTemplate(templatePath, destinationPath) {
12
+ copyFileSync(resolve(__dirname, "../templates", templatePath), destinationPath);
13
+ }
14
+
15
+ function createProject(projectName) {
16
+ const projectPath = resolve(process.cwd(), projectName);
17
+
18
+ if (existsSync(projectPath)) {
19
+ console.error(`Folder ${projectName} already exists.`);
20
+ process.exit(1);
21
+ }
22
+
23
+ mkdirSync(projectPath);
24
+ mkdirSync(resolve(projectPath, "src"));
25
+
26
+ // Copy templates
27
+ copyTemplate("index.html", resolve(projectPath, "index.html"));
28
+ copyTemplate("src/index.js", resolve(projectPath, "src/index.js"));
29
+ copyTemplate("src/App.js", resolve(projectPath, "src/App.js"));
30
+ copyTemplate("webpack.config.js", resolve(projectPath, "webpack.config.js"));
31
+
32
+ // Create package.json
33
+ const pkg = {
34
+ name: projectName,
35
+ version: "1.0.0",
36
+ type: "module",
37
+ scripts: {
38
+ build: "webpack",
39
+ start: "npx serve . -l 4000",
40
+ },
41
+ dependencies: {
42
+ react: "^18.0.0",
43
+ "react-dom": "^18.0.0",
44
+ nodality: "^1.0.0-beta.4",
45
+ },
46
+ devDependencies: {
47
+ webpack: "^5.0.0",
48
+ "webpack-cli": "^5.0.0",
49
+ "babel-loader": "^9.0.0",
50
+ "@babel/core": "^7.0.0",
51
+ "@babel/preset-env": "^7.0.0",
52
+ "@babel/preset-react": "^7.0.0",
53
+ },
54
+ };
55
+ writeFileSync(resolve(projectPath, "package.json"), JSON.stringify(pkg, null, 2));
56
+
57
+ // Install dependencies
58
+ console.log("Installing dependencies...");
59
+ execSync(`npm install`, { cwd: projectPath, stdio: "inherit" });
60
+
61
+ // Build project
62
+ console.log("Building with Webpack...");
63
+ execSync(`npx webpack`, { cwd: projectPath, stdio: "inherit" });
64
+
65
+ console.log(`\nDone! To start your app:
66
+ cd ${projectName}
67
+ npm run build # to rebuild
68
+ npm start # serve on localhost:4000
69
+ `);
70
+ }
71
+
72
+ // Parse CLI arguments
73
+ const args = process.argv.slice(2);
74
+ if (!args[0]) {
75
+ console.error("Usage: npm create nodality-react <project-name>");
76
+ process.exit(1);
77
+ }
78
+
79
+ createProject(args[0]);
package/package.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "name": "create-nodality-react",
3
+ "version": "1.0.0-beta.1",
4
+ "description": "Scaffolding tool for creating Nodality React projects",
5
+ "main": "bin/index.js",
6
+ "bin": {
7
+ "create-nodality-react": "./bin/index.js"
8
+ },
9
+ "scripts": {},
10
+ "keywords": ["nodality", "react", "scaffolding", "create"],
11
+ "author": "Your Name",
12
+ "license": "MIT",
13
+ "dependencies": {}
14
+ }
package/readme.md ADDED
File without changes
package/templates/index.html ADDED
@@ -0,0 +1,11 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>My Nodality React App</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ </body>
11
+ </html>
package/templates/src/App.js ADDED
@@ -0,0 +1,54 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ import { Text, Wrapper } from 'nodality';
3
+
4
+ function Extracted(props) {
5
+ let ref = useRef();
6
+
7
+ useEffect(() => {
8
+ let t = props.view;
9
+ if (ref.current) {
10
+ ref.current.appendChild(t.render());
11
+ }
12
+ return () => {
13
+ if (ref.current) {
14
+ ref.current.innerHTML = "";
15
+ }
16
+ };
17
+ }, [props]);
18
+
19
+ return <div ref={ref} />;
20
+ }
21
+
22
+ function Wrappera({ setIsNav }) {
23
+ const [count, setCount] = useState(0);
24
+
25
+ return (
26
+ <Extracted
27
+ view={
28
+ new Wrapper()
29
+ .set({ background: "orange" })
30
+ .add([
31
+ new Text(`Counter ${count}`).set({
32
+ fluidc: "S1",
33
+ font: "Arial",
34
+ onTap: () => {
35
+ setCount(count + 1);
36
+ if (setIsNav) setIsNav(false);
37
+ },
38
+ }),
39
+ ])
40
+ }
41
+ />
42
+ );
43
+ }
44
+
45
+ function App() {
46
+ return (
47
+ <div>
48
+ <h1>Nodality React App</h1>
49
+ <Wrappera />
50
+ </div>
51
+ );
52
+ }
53
+
54
+ export default App;
package/templates/src/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom/client';
3
+ import App from './App';
4
+
5
+ const root = ReactDOM.createRoot(document.getElementById('root'));
6
+ root.render(<App />);
package/templates/webpack.config.js ADDED
@@ -0,0 +1,35 @@
1
+ import path from 'path';
2
+ import { fileURLToPath } from 'url';
3
+
4
+ const __filename = fileURLToPath(import.meta.url);
5
+ const __dirname = path.dirname(__filename);
6
+
7
+ export default {
8
+ mode: 'development',
9
+ entry: './src/index.js',
10
+ output: {
11
+ filename: 'bundle.js',
12
+ path: path.resolve(__dirname, 'dist'),
13
+ },
14
+ module: {
15
+ rules: [
16
+ {
17
+ test: /\.jsx?$/,
18
+ exclude: /node_modules/,
19
+ use: {
20
+ loader: 'babel-loader',
21
+ options: {
22
+ presets: ['@babel/preset-env', '@babel/preset-react'],
23
+ },
24
+ },
25
+ },
26
+ ],
27
+ },
28
+ resolve: {
29
+ alias: {
30
+ nodality: path.resolve(__dirname, 'node_modules/nodality/dist/index.esm.js'),
31
+ },
32
+ extensions: ['.js', '.jsx'],
33
+ },
34
+ devtool: 'source-map',
35
+ };