@webmate-studio/cli 0.3.14 → 0.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/cli",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "type": "module",
   "description": "Webmate Studio CLI - Build and manage your Webmate components",
   "keywords": [
@@ -35,7 +35,7 @@
     "@webmate-studio/builder": "^0.2.1",
     "@webmate-studio/core": "^0.2.0",
     "@webmate-studio/parser": "^0.2.1",
-    "@webmate-studio/preview": "^0.2.12",
+    "@webmate-studio/preview": "^0.2.14",
     "alpinejs": "^3.15.0",
     "commander": "^11.0.0",
     "esbuild": "^0.19.0",

package/src/commands/dev.js

@@ -5,21 +5,18 @@ import pc from 'picocolors';
 
 /**
  * Dev command - start preview server
- * Requires login to load design system CSS
+ * Login is optional - if logged in, design tokens will be loaded
  */
 export async function devCommand(options) {
-	// Check if logged in
-	if (!isLoggedIn()) {
-		console.log('');
-		logger.error('Nicht eingeloggt.');
-		logger.info(`Bitte zuerst einloggen: ${pc.cyan('wm login')}`);
-		console.log('');
-		process.exit(1);
+	// Check if logged in (optional)
+	if (isLoggedIn()) {
+		const auth = loadAuth();
+		logger.info(`Projekt: ${pc.cyan(auth.tenant.name)}`);
+	} else {
+		logger.info('Nicht eingeloggt - verwende Standard Design Tokens');
+		logger.info(`Tipp: ${pc.cyan('wm login')} um Design Tokens vom CMS zu laden`);
 	}
 
-	const auth = loadAuth();
-	logger.info(`Projekt: ${pc.cyan(auth.tenant.name)}`);
-
 	try {
 		await startPreviewServer(options);
 	} catch (error) {

package/src/templates/islands/alpine.js

@@ -8,8 +8,16 @@ export default class {{NAME}}Island {
 	constructor(element, props = {}) {
 		this.element = element;
 
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
+
+		// Merge with constructor props (constructor props override data-island-props)
+		const allProps = { ...islandProps, ...props };
+
 		// Title aus props oder default
-		const title = props.title || '{{NAME}} Component';
+		const title = allProps.title || '{{NAME}} Component';
 
 		// Create Alpine component HTML
 		const html = `

package/src/templates/islands/lit.js

@@ -61,15 +61,16 @@ export default class {{NAME}}Island {
 		// Replace element content with Lit component (use unique name)
 		const component = document.createElement(uniqueComponentName);
 
-		// Transfer any data-attributes
-		for (const attr of element.attributes) {
-			if (attr.name.startsWith('data-')) {
-				component.setAttribute(attr.name, attr.value);
-			}
-		}
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
+
+		// Merge with constructor props (constructor props override data-island-props)
+		const allProps = { ...islandProps, ...props };
 
-		// Set initial props
-		Object.assign(component, props);
+		// Set all props on component
+		Object.assign(component, allProps);
 
 		element.appendChild(component);
 		this.component = component;

package/src/templates/islands/preact.jsx

@@ -36,11 +36,13 @@ export default class {{NAME}}Island {
 	constructor(element, props = {}) {
 		this.element = element;
 
-		// Get initial data from data-attributes
-		const initialData = JSON.parse(element.dataset.initialData || '{}');
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
 
-		// Merge props
-		const allProps = { ...initialData, ...props };
+		// Merge with constructor props (constructor props override data-island-props)
+		const allProps = { ...islandProps, ...props };
 
 		render(<{{NAME}}Component {...allProps} />, element);
 	}

package/src/templates/islands/react.jsx

@@ -37,9 +37,11 @@ export default class {{NAME}}Island {
 		this.element = element;
 		this.root = createRoot(element);
 
-		// Get initial data from data-attributes
-		const initialData = JSON.parse(element.dataset.initialData || '{}');
-		const allProps = { ...initialData, ...props };
+		// Get props from data-island-props attribute
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
+		const allProps = { ...islandProps, ...props };
 
 		this.root.render(<{{NAME}}Component {...allProps} />);
 	}

package/src/templates/islands/svelte.js

@@ -9,11 +9,13 @@ export default class {{NAME}}Island {
 	constructor(element, props = {}) {
 		this.element = element;
 
-		// Get initial props from data-attributes
-		const initialData = JSON.parse(element.dataset.initialData || '{}');
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
 
-		// Merge props from constructor and data attributes
-		const allProps = { ...initialData, ...props };
+		// Merge with constructor props (constructor props override data-island-props)
+		const allProps = { ...islandProps, ...props };
 
 		// Svelte 5: Use mount() instead of new Component()
 		this.component = mount(Component, {

package/src/templates/islands/vanilla.js

@@ -5,7 +5,14 @@
 export default class {{NAME}}Island {
 	constructor(element, props = {}) {
 		this.element = element;
-		this.props = props;
+
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
+
+		// Merge with constructor props (constructor props override data-island-props)
+		this.props = { ...islandProps, ...props };
 		this.count = 0;
 		this.init();
 	}

package/src/templates/islands/vue.js

@@ -46,11 +46,13 @@ export default class {{NAME}}Island {
 	constructor(element, props = {}) {
 		this.element = element;
 
-		// Get initial data from data-attributes
-		const initialData = JSON.parse(element.dataset.initialData || '{}');
+		// Get props from data-island-props attribute (set by Custom Element transformation)
+		const islandProps = element.dataset.islandProps
+			? JSON.parse(element.dataset.islandProps)
+			: {};
 
-		// Merge props
-		const allProps = { ...initialData, ...props };
+		// Merge with constructor props (constructor props override data-island-props)
+		const allProps = { ...islandProps, ...props };
 
 		// Create Vue app
 		this.app = createApp({{NAME}}Component, allProps);