create-nodality-vue 1.0.0-beta.0 → 1.0.0-beta.10

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 +74 -0
  2. package/package.json +9 -25
  3. package/templates/index.html +12 -0
  4. package/templates/src/App.vue +43 -0
  5. package/templates/src/components/HelloWorld.vue +37 -0
  6. package/templates/src/main.js +4 -0
  7. package/templates/vite.config.js +6 -0
package/bin/index.js ADDED
@@ -0,0 +1,74 @@
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 createVueProject(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
+ mkdirSync(resolve(projectPath, "src/components"));
26
+
27
+ // Copy templates
28
+ copyTemplate("index.html", resolve(projectPath, "index.html"));
29
+ copyTemplate("src/main.js", resolve(projectPath, "src/main.js"));
30
+ copyTemplate("src/App.vue", resolve(projectPath, "src/App.vue"));
31
+ copyTemplate("src/components/HelloWorld.vue", resolve(projectPath, "src/components/HelloWorld.vue"));
32
+ copyTemplate("vite.config.js", resolve(projectPath, "vite.config.js"));
33
+
34
+ // Create package.json
35
+ const pkg = {
36
+ name: projectName,
37
+ version: "1.0.0",
38
+ type: "module",
39
+ scripts: {
40
+ dev: "vite",
41
+ build: "vite build",
42
+ serve: "vite preview",
43
+ },
44
+ dependencies: {
45
+ vue: "^3.0.0",
46
+ nodality: "^1.0.0-beta.6",
47
+ },
48
+ devDependencies: {
49
+ vite: "^4.0.0",
50
+ "@vitejs/plugin-vue": "^4.0.0",
51
+ },
52
+ };
53
+ writeFileSync(resolve(projectPath, "package.json"), JSON.stringify(pkg, null, 2));
54
+
55
+ // Install dependencies
56
+ console.log("Installing dependencies...");
57
+ execSync("npm install", { cwd: projectPath, stdio: "inherit" });
58
+
59
+ console.log(`\nDone! To start your app:
60
+ cd ${projectName}
61
+ npm run dev # Start development server
62
+ npm run build # Build for production
63
+ npm run serve # Preview production build
64
+ `);
65
+ }
66
+
67
+ // Parse CLI arguments
68
+ const args = process.argv.slice(2);
69
+ if (!args[0]) {
70
+ console.error("Usage: npm create nodality-vue <project-name>");
71
+ process.exit(1);
72
+ }
73
+
74
+ createVueProject(args[0]);
package/package.json CHANGED
@@ -1,44 +1,28 @@
1
1
  {
2
2
  "name": "create-nodality-vue",
3
- "version": "1.0.0-beta.0",
3
+ "version": "1.0.0-beta.10",
4
4
  "description": "A scaffolding tool for creating Vue.js projects integrated with Nodality.",
5
5
  "main": "bin/index.js",
6
6
  "bin": {
7
7
  "create-nodality-vue": "./bin/index.js"
8
8
  },
9
- "scripts": {
10
- "test": "echo \"No tests specified\" && exit 0"
11
- },
9
+ "files": [
10
+ "bin/",
11
+ "templates/"
12
+ ],
13
+ "scripts": {},
12
14
  "keywords": [
13
15
  "nodality",
14
16
  "vue",
15
17
  "scaffolding",
16
- "create",
17
- "frontend"
18
+ "create"
18
19
  ],
19
20
  "author": "Filip Vabrousek",
20
21
  "license": "MIT",
21
22
  "dependencies": {
22
- "fs-extra": "^11.1.0",
23
- "nodality": "^1.0.0-beta.4"
24
- },
25
- "devDependencies": {
26
- "eslint": "^8.45.0",
27
- "prettier": "^3.0.0"
23
+ "fs-extra": "^11.1.0"
28
24
  },
29
25
  "engines": {
30
26
  "node": ">=16.0.0"
31
- },
32
- "files": [
33
- "bin/",
34
- "templates/"
35
- ],
36
- "repository": {
37
- "type": "git",
38
- "url": "https://github.com/nodalityjs/create-nodality-vue.git"
39
- },
40
- "bugs": {
41
- "url": "https://github.com/nodalityjs/create-nodality-vue/issues"
42
- },
43
- "homepage": "https://github.com/nodalityjs/create-nodality-vue#readme"
27
+ }
44
28
  }
package/templates/index.html ADDED
@@ -0,0 +1,12 @@
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.0" />
6
+ <title>My Nodality Vue App</title>
7
+ </head>
8
+ <body>
9
+ <div id="app"></div>
10
+ <script type="module" src="/src/main.js"></script>
11
+ </body>
12
+ </html>
package/templates/src/App.vue ADDED
@@ -0,0 +1,43 @@
1
+ <template>
2
+ <HelloWorld :text="textInstance" v-model:msg="welcomeMessage"/>
3
+ </template>
4
+
5
+ <script>
6
+ import HelloWorld from './components/HelloWorld.vue'
7
+ import {Text} from "nodality";
8
+ export default {
9
+ name: 'App',
10
+ components: {
11
+ HelloWorld
12
+ },
13
+
14
+ watch: {
15
+ // Watch for changes to welcomeMessage and recreate the instance
16
+ welcomeMessage() {
17
+ console.log(this.welcomeMessage) // THIS WORKS
18
+ this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
19
+ },
20
+ },
21
+ data() {
22
+ return {
23
+ welcomeMessage: "Welcome to Your Vue.js App", // Define a reactive property
24
+ textInstance: null
25
+ }
26
+ },
27
+ created() {
28
+ // Initialize the Text instance when the component is created
29
+ this.textInstance = new Text(this.welcomeMessage).set({ size: "S1", color: "#1abc9c" });
30
+ },
31
+ }
32
+ </script>
33
+
34
+ <style>
35
+ #app {
36
+ font-family: Avenir, Helvetica, Arial, sans-serif;
37
+ -webkit-font-smoothing: antialiased;
38
+ -moz-osx-font-smoothing: grayscale;
39
+ text-align: center;
40
+ color: #2c3e50;
41
+ margin-top: 60px;
42
+ }
43
+ </style>
package/templates/src/components/HelloWorld.vue ADDED
@@ -0,0 +1,37 @@
1
+ <script setup>
2
+ import { useTemplateRef, onMounted, defineProps, defineEmits, watch } from 'vue'
3
+
4
+ // Define props to accept the msg value
5
+ const props = defineProps({
6
+ msg: String,
7
+ text: Object
8
+ })
9
+
10
+ const emit = defineEmits(['update:msg'])
11
+
12
+ // the first argument must match the ref value in the template
13
+ const input = useTemplateRef('my-input')
14
+ let mycomp = useTemplateRef('my-comp')
15
+
16
+ onMounted(() => {
17
+ input.value.focus()
18
+ let ela = props.text.render();//document.createElement("h1");
19
+ mycomp.value.appendChild(ela);
20
+ })
21
+
22
+ watch(() => props.msg, () => { // 12:21:57 Wow!!!
23
+
24
+ mycomp.value.innerHTML = ""; // Clear existing content
25
+ const element = props.text.render(); // Call the render method
26
+ mycomp.value.appendChild(element);
27
+ })
28
+
29
+ function updateMessage(event) {
30
+ emit('update:msg', event.target.value)
31
+ }
32
+ </script>
33
+
34
+ <template>
35
+ <input ref="my-input" :value="msg" @input="updateMessage" />
36
+ <div ref="my-comp"/>
37
+ </template>
package/templates/src/main.js ADDED
@@ -0,0 +1,4 @@
1
+ import { createApp } from "vue";
2
+ import App from "./App.vue";
3
+
4
+ createApp(App).mount("#app");
package/templates/vite.config.js ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'vite';
2
+ import vue from '@vitejs/plugin-vue';
3
+
4
+ export default defineConfig({
5
+ plugins: [vue()],
6
+ });