@stencil/templates 5.0.0-alpha.7 → 5.0.0-alpha.8

package/dist/index.d.mts

@@ -41,4 +41,35 @@ type ProjectTemplateId = (typeof PROJECT_TEMPLATES)[number];
  */
 declare function getTemplatePath(templateId: ProjectTemplateId): string;
 //#endregion
-export { PROJECT_TEMPLATES, type ProjectTemplateId, type StyleExtension, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };
+//#region src/project/config.d.ts
+type OutputKey = 'loader' | 'standalone' | 'ssr' | 'ssr-wasm' | 'www';
+type DocKey = 'cem' | 'json' | 'vscode';
+interface PackageJsonFields {
+  type?: 'module';
+  module?: string;
+  types?: string;
+}
+interface ConfigSelections {
+  namespace: string;
+  outputs: ReadonlyArray<OutputKey>;
+  signals: boolean;
+  docs: ReadonlyArray<DocKey>;
+}
+/**
+ * Returns stencil.config.ts source for the given selections, or null if zero-config
+ * covers everything (outputs = [] | ['loader'], no signals, no docs).
+ *
+ * @param sel - Wizard selections to encode into the config file.
+ * @returns TypeScript source string, or null if no config file is needed.
+ */
+declare function generateStencilConfig(sel: ConfigSelections): string | null;
+/**
+ * Returns the package.json distributable fields for the given output selections.
+ * Returns an empty object for www-only (non-publishable app mode).
+ * Priority: loader > standalone > ssr > ssr-wasm.
+ * @param outputs - Wizard output selections to encode into package.json.
+ * @returns An object with the fields to write into package.json.
+ */
+declare function generatePackageJsonFields(outputs: ReadonlyArray<OutputKey>): PackageJsonFields;
+//#endregion
+export { type ConfigSelections, type DocKey, type OutputKey, PROJECT_TEMPLATES, type PackageJsonFields, type ProjectTemplateId, type StyleExtension, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };

package/dist/index.mjs

@@ -65,4 +65,72 @@ function getTemplatePath(templateId) {
 	return join(__dirname, "..", "templates", "project", templateId);
 }
 //#endregion
-export { PROJECT_TEMPLATES, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };
+//#region src/project/config.ts
+/**
+* Returns stencil.config.ts source for the given selections, or null if zero-config
+* covers everything (outputs = [] | ['loader'], no signals, no docs).
+*
+* @param sel - Wizard selections to encode into the config file.
+* @returns TypeScript source string, or null if no config file is needed.
+*/
+function generateStencilConfig(sel) {
+	if ((sel.outputs.length === 0 || sel.outputs.length === 1 && sel.outputs[0] === "loader") && !sel.signals && sel.docs.length === 0) return null;
+	const outputLines = [];
+	if (sel.outputs.includes("loader") || sel.outputs.length === 0) outputLines.push(`    { type: 'loader-bundle' },`);
+	if (sel.outputs.includes("standalone")) outputLines.push(`    { type: 'standalone' },`);
+	if (sel.outputs.includes("ssr")) outputLines.push(`    { type: 'ssr' },`);
+	if (sel.outputs.includes("ssr-wasm")) outputLines.push(`    { type: 'ssr-wasm' },`);
+	if (sel.outputs.includes("www")) outputLines.push(`    { type: 'www' },`);
+	if (sel.docs.includes("cem")) outputLines.push(`    { type: 'docs-custom-elements-manifest', file: 'custom-elements.json' },`);
+	if (sel.docs.includes("json")) outputLines.push(`    { type: 'docs-json', file: 'docs/api.json' },`);
+	if (sel.docs.includes("vscode")) outputLines.push(`    { type: 'docs-vscode', file: 'vscode-data.json' },`);
+	const parts = [
+		`import type { Config } from '@stencil/core';`,
+		``,
+		`export const config: Config = {`,
+		`  namespace: '${sel.namespace}',`
+	];
+	if (outputLines.length > 0) {
+		parts.push(`  outputTargets: [`);
+		parts.push(...outputLines);
+		parts.push(`  ],`);
+	}
+	if (sel.signals) parts.push(`  signalBacking: true,`);
+	parts.push(`};`);
+	parts.push(``);
+	return parts.join("\n");
+}
+/**
+* Returns the package.json distributable fields for the given output selections.
+* Returns an empty object for www-only (non-publishable app mode).
+* Priority: loader > standalone > ssr > ssr-wasm.
+* @param outputs - Wizard output selections to encode into package.json.
+* @returns An object with the fields to write into package.json.
+*/
+function generatePackageJsonFields(outputs) {
+	const isDefault = outputs.length === 0;
+	const has = (key) => outputs.includes(key);
+	if (isDefault || has("loader")) return {
+		type: "module",
+		module: "./dist/loader-bundle/index.js",
+		types: "./dist/types/loader.d.ts"
+	};
+	if (has("standalone")) return {
+		type: "module",
+		module: "./dist/standalone/index.js",
+		types: "./dist/types/standalone.d.ts"
+	};
+	if (has("ssr")) return {
+		type: "module",
+		module: "./dist/ssr/index.js",
+		types: "./dist/ssr/index.d.ts"
+	};
+	if (has("ssr-wasm")) return {
+		type: "module",
+		module: "./dist/ssr-wasm/index.js",
+		types: "./dist/ssr-wasm/plugin.d.ts"
+	};
+	return {};
+}
+//#endregion
+export { PROJECT_TEMPLATES, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/templates",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.8",
   "description": "Project and generate templates for Stencil",
   "keywords": [
     "scaffolding",

package/templates/project/component-starter/package.json

@@ -6,16 +6,13 @@
   "files": [
     "dist/"
   ],
-  "main": "dist/loader-bundle/index.cjs",
-  "module": "dist/loader-bundle/index.js",
-  "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "stencil build",
     "dev": "stencil build --dev --watch --serve",
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@stencil/core": "^5.0.0"
+    "@stencil/core": "{{STENCIL_VERSION}}"
   },
-  "collection": "dist/collection/collection-manifest.json"
+  "collection": "./dist/collection/collection-manifest.json"
 }

package/templates/project/component-starter/src/components/my-component/my-component.tsx

@@ -1,4 +1,6 @@
-import { Component, Host } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
+
+import { format } from '../../utils/utils';
 
 @Component({
   tag: 'my-component',
@@ -6,11 +8,20 @@ import { Component, Host } from '@stencil/core';
   encapsulation: { type: 'shadow' },
 })
 export class MyComponent {
+  /** The first name */
+  @Prop() first?: string;
+
+  /** The middle name */
+  @Prop() middle?: string;
+
+  /** The last name */
+  @Prop() last?: string;
+
+  private getText(): string {
+    return format(this.first, this.middle, this.last);
+  }
+
   render() {
-    return (
-      <Host>
-        <slot></slot>
-      </Host>
-    );
+    return <div>Hello, World! I'm {this.getText()}</div>;
   }
 }

package/templates/project/component-starter/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function format(first?: string, middle?: string, last?: string): string {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}