@webmate-studio/cli 0.2.25 → 0.3.0

package/bin/wm.mjs

@@ -54,7 +54,7 @@ program
 program
 	.command('dev')
 	.description('Start development server with live preview')
-	.option('-p, --port <port>', 'Port to run on', '5173')
+	.option('-p, --port <port>', 'Port to run on', '3030')
 	.option('-o, --open', 'Open browser automatically')
 	.action(devCommand);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/cli",
-  "version": "0.2.25",
+  "version": "0.3.0",
   "type": "module",
   "description": "Webmate Studio CLI - Build and manage your Webmate components",
   "keywords": [
@@ -33,7 +33,7 @@
     "@inquirer/prompts": "^5.0.0",
     "@webmate-studio/builder": "^0.1.11",
     "@webmate-studio/core": "^0.1.5",
-    "@webmate-studio/preview": "^0.1.12",
+    "@webmate-studio/preview": "^0.1.13",
     "alpinejs": "^3.15.0",
     "commander": "^11.0.0",
     "esbuild": "^0.19.0",

package/src/commands/generate.js

@@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import { input, select, confirm } from '@inquirer/prompts';
 import pc from 'picocolors';
-import { loadConfig } from '../utils/config.js';
+import { loadConfig, generateUUID } from '@webmate-studio/core';
 
 /**
  * Generate a new component or island
@@ -341,8 +341,8 @@ async function generateDirectoryComponent(componentDir, name, options, config =
 
 	// Create component.json (metadata + props + islands config)
 	const componentJson = {
-		name,
-		version: '1.0.0',
+		id: generateUUID(),
+		displayName: name,
 		description,
 		category
 	};
@@ -377,17 +377,25 @@ async function generateDirectoryComponent(componentDir, name, options, config =
 	let exampleHtml = '';
 
 	if (islandFramework) {
-		// Island component: demonstriere title prop
+		// Island component: demonstriere title prop (Svelte-style syntax)
 		const hasTitle = props.title;
-		const islandPropsJson = hasTitle ? `{"title": "{{title}}"}` : '{}';
 
-		exampleHtml = `\t<div
-		data-island="${toKebabCase(name)}"
-		data-island-props='${islandPropsJson}'
+		if (hasTitle) {
+			exampleHtml = `\t<div
+		wm:island="${toKebabCase(name)}"
+		wm:island-prop:title={title}
+		class="p-6 bg-white rounded-lg border border-gray-200"
+	>
+		<!-- Island wird hier initialisiert -->
+	</div>`;
+		} else {
+			exampleHtml = `\t<div
+		wm:island="${toKebabCase(name)}"
 		class="p-6 bg-white rounded-lg border border-gray-200"
 	>
 		<!-- Island wird hier initialisiert -->
 	</div>`;
+		}
 	} else {
 		// Normale component: zeige title an
 		const hasTitle = props.title;
@@ -472,6 +480,21 @@ ${exampleHtml}
 	if (options.assets) {
 		await fs.mkdir(path.join(componentDir, 'assets'), { recursive: true });
 	}
+
+	// Create package.json (always include for npm dependencies)
+	const packageJson = {
+		name: toKebabCase(name),
+		version: '1.0.0',
+		private: true,
+		type: 'module',
+		dependencies: {}
+	};
+
+	await fs.writeFile(
+		path.join(componentDir, 'package.json'),
+		JSON.stringify(packageJson, null, 2),
+		'utf-8'
+	);
 }
 
 /**

package/src/commands/init.js

@@ -1,6 +1,6 @@
 import { existsSync, mkdirSync, writeFileSync } from 'fs';
 import { join } from 'path';
-import { logger } from '@webmate-studio/core';
+import { logger, generateUUID } from '@webmate-studio/core';
 import pc from 'picocolors';
 
 /**
@@ -147,11 +147,11 @@ body {
 `;
 		writeFileSync(componentHtmlPath, componentHtmlContent, 'utf8');
 
-		// component.json
+		// component.json with UUID
 		const componentJsonPath = join(exampleSimpleDir, 'component.json');
 		const componentJsonContent = `{
-	"name": "ExampleSimple",
-	"version": "1.0.0",
+	"id": "${generateUUID()}",
+	"displayName": "Example Simple",
 	"description": "A simple example component using Tailwind CSS",
 	"category": "examples",
 	"props": {
@@ -166,6 +166,18 @@ body {
 `;
 		writeFileSync(componentJsonPath, componentJsonContent, 'utf8');
 
+		// package.json (always include for npm dependencies)
+		const packageJsonPath = join(exampleSimpleDir, 'package.json');
+		const packageJsonContent = `{
+	"name": "example-simple",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"dependencies": {}
+}
+`;
+		writeFileSync(packageJsonPath, packageJsonContent, 'utf8');
+
 		logger.success('Created components/ExampleSimple/');
 	}
 
@@ -192,8 +204,9 @@ body {
 	<!-- Interactive Island (Vanilla JS) -->
 	<!-- Islands can also use: React, Svelte, Vue, Preact, Alpine.js, or Lit -->
 	<div
-		data-island="counter"
-		data-island-props='{"initialCount": 0, "label": "Clicks"}'
+		wm:island="counter"
+		wm:island-prop:initialCount={0}
+		wm:island-prop:label={"Clicks"}
 		class="p-6 bg-white rounded-lg border-2 border-blue-200"
 	>
 		<p class="text-sm text-gray-500 mb-4">
@@ -222,11 +235,11 @@ body {
 `;
 		writeFileSync(componentHtmlPath, componentHtmlContent, 'utf8');
 
-		// component.json
+		// component.json with UUID
 		const componentJsonPath = join(exampleExtendedDir, 'component.json');
 		const componentJsonContent = `{
-	"name": "ExampleExtended",
-	"version": "1.0.0",
+	"id": "${generateUUID()}",
+	"displayName": "Example Extended",
 	"description": "Extended example component with interactive island",
 	"category": "examples",
 	"props": {
@@ -338,6 +351,18 @@ export default class CounterIsland {
 `;
 		writeFileSync(counterIslandPath, counterIslandContent, 'utf8');
 
+		// package.json (always include for npm dependencies)
+		const packageJsonPath2 = join(exampleExtendedDir, 'package.json');
+		const packageJsonContent2 = `{
+	"name": "example-extended",
+	"version": "1.0.0",
+	"private": true,
+	"type": "module",
+	"dependencies": {}
+}
+`;
+		writeFileSync(packageJsonPath2, packageJsonContent2, 'utf8');
+
 		logger.success('Created components/ExampleExtended/ (with island)');
 	}
 
@@ -348,6 +373,8 @@ export default class CounterIsland {
 dist/
 .DS_Store
 *.log
+components/*/node_modules/
+components/*/.wm-cache/
 `;
 		writeFileSync(gitignorePath, gitignoreContent, 'utf8');
 		logger.success('Created .gitignore');

package/src/commands/prop.js

@@ -8,8 +8,29 @@ import glob from 'glob';
 /**
  * Add a property to a component
  * wm prop [filename]
+ *
+ * @deprecated This command is deprecated.
+ * Props should now be defined in component.json, not in HTML files.
+ * Use: wm generate to create new components with proper structure.
  */
 export async function prop(filename) {
+	console.log(pc.red('\n⚠️  DEPRECATED COMMAND\n'));
+	console.log(pc.yellow('The `wm prop` command is deprecated.'));
+	console.log(pc.yellow('Props should now be defined in component.json, not in HTML files.\n'));
+	console.log(pc.cyan('To add props to a component:'));
+	console.log(pc.dim('  1. Open components/YourComponent/component.json'));
+	console.log(pc.dim('  2. Add your props to the "props" section\n'));
+	console.log(pc.cyan('Example:'));
+	console.log(pc.dim('  "props": {'));
+	console.log(pc.dim('    "title": {'));
+	console.log(pc.dim('      "type": "text",'));
+	console.log(pc.dim('      "label": "Title",'));
+	console.log(pc.dim('      "default": "Hello World"'));
+	console.log(pc.dim('    }'));
+	console.log(pc.dim('  }\n'));
+	return;
+
+	// Legacy code below (no longer executed)
 	console.log(pc.cyan('\n📝 Add Property to Component\n'));
 
 	let targetFile;