@stencil/templates 5.0.0-beta.2 → 5.0.0-beta.20

package/README.md

@@ -119,7 +119,7 @@ Returns the `module`, `types`, and `type` fields to merge into `package.json` fo
 import { generatePackageJsonFields } from '@stencil/templates';
 
 generatePackageJsonFields([]);             // loader-bundle (default)
-// { type: 'module', module: './dist/loader-bundle/index.js', types: './dist/types/loader.d.ts' }
+// { type: 'module', module: './dist/loader-bundle/esm/loader.js', types: './dist/types/loader.d.ts' }
 
 generatePackageJsonFields(['standalone']);
 // { type: 'module', module: './dist/standalone/index.js', types: './dist/types/standalone.d.ts' }

package/dist/index.d.mts

@@ -19,6 +19,19 @@ declare function toPascalCase(str: string): string;
  */
 declare function getComponentBoilerplate(tagName: string, styleExtension?: string): string;
 //#endregion
+//#region src/generate/css-component.d.ts
+/**
+ * Returns the CSS-only component boilerplate for `stencil generate` - a documented tag
+ * definition with no backing JS class, no shadow root, and no `customElements.define()`.
+ * See `packages/core/src/compiler/css-components/`.
+ * SASS indented syntax uses indentation instead of braces.
+ *
+ * @param tagName - Dash-case custom element tag name.
+ * @param ext - File extension (e.g. `'css'`, `'scss'`, `'sass'`, `'less'`). Defaults to `'css'`.
+ * @returns Stylesheet source string for the new CSS-only component file.
+ */
+declare function getCssOnlyComponentBoilerplate(tagName: string, ext?: string): string;
+//#endregion
 //#region src/generate/style.d.ts
 /**
  * Returns the stylesheet boilerplate for `stencil generate`.
@@ -53,11 +66,13 @@ interface ConfigSelections {
   namespace: string;
   outputs: ReadonlyArray<OutputKey>;
   signals: boolean;
+  /** Write an `exports` map into `package.json` on each production build. */
+  exportMaps?: 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).
+ * covers everything (outputs = [] | ['loader'], no signals, no export maps, no docs).
  *
  * @param sel - Wizard selections to encode into the config file.
  * @returns TypeScript source string, or null if no config file is needed.
@@ -110,4 +125,4 @@ declare function getUsageExampleBoilerplate(tagName: string): string;
  */
 declare function getPreviewHtmlBoilerplate(tagName: string, entryScriptSrc: string | null): string;
 //#endregion
-export { type ConfigSelections, type DocKey, type IndexHtmlSelections, type OutputKey, PROJECT_TEMPLATES, type PackageJsonFields, type ProjectTemplateId, type StyleExtension, generateIndexHtml, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getPreviewHtmlBoilerplate, getStyleBoilerplate, getTemplatePath, getUsageExampleBoilerplate, toPascalCase };
+export { type ConfigSelections, type DocKey, type IndexHtmlSelections, type OutputKey, PROJECT_TEMPLATES, type PackageJsonFields, type ProjectTemplateId, type StyleExtension, generateIndexHtml, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getCssOnlyComponentBoilerplate, getPreviewHtmlBoilerplate, getStyleBoilerplate, getTemplatePath, getUsageExampleBoilerplate, toPascalCase };

package/dist/index.mjs

@@ -39,6 +39,33 @@ export class ${toPascalCase(tagName)} {
 `;
 }
 //#endregion
+//#region src/generate/css-component.ts
+/**
+* Returns the CSS-only component boilerplate for `stencil generate` - a documented tag
+* definition with no backing JS class, no shadow root, and no `customElements.define()`.
+* See `packages/core/src/compiler/css-components/`.
+* SASS indented syntax uses indentation instead of braces.
+*
+* @param tagName - Dash-case custom element tag name.
+* @param ext - File extension (e.g. `'css'`, `'scss'`, `'sass'`, `'less'`). Defaults to `'css'`.
+* @returns Stylesheet source string for the new CSS-only component file.
+*/
+function getCssOnlyComponentBoilerplate(tagName, ext = "css") {
+	if (ext === "sass") return `/**
+ * @component
+ */
+${tagName}
+  display: block
+`;
+	return `/**
+ * @component
+ */
+${tagName} {
+  display: block;
+}
+`;
+}
+//#endregion
 //#region src/generate/style.ts
 /**
 * Returns the stylesheet boilerplate for `stencil generate`.
@@ -68,15 +95,15 @@ function getTemplatePath(templateId) {
 //#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).
+* covers everything (outputs = [] | ['loader'], no signals, no export maps, 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;
+	if ((sel.outputs.length === 0 || sel.outputs.length === 1 && sel.outputs[0] === "loader") && !sel.signals && !sel.exportMaps && 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("loader")) 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' },`);
@@ -97,6 +124,7 @@ function generateStencilConfig(sel) {
 		parts.push(`  ],`);
 	}
 	if (sel.signals) parts.push(`  signalBacking: true,`);
+	if (sel.exportMaps) parts.push(`  generateExportMaps: true,`);
 	parts.push(`};`);
 	parts.push(``);
 	return parts.join("\n");
@@ -113,7 +141,7 @@ function generatePackageJsonFields(outputs) {
 	const has = (key) => outputs.includes(key);
 	if (isDefault || has("loader")) return {
 		type: "module",
-		module: "./dist/loader-bundle/index.js",
+		module: "./dist/loader-bundle/esm/loader.js",
 		types: "./dist/types/loader.d.ts"
 	};
 	if (has("standalone")) return {
@@ -208,4 +236,4 @@ ${entryScriptSrc ? `    <script type="module" src="${entryScriptSrc}"><\/script>
 `;
 }
 //#endregion
-export { PROJECT_TEMPLATES, generateIndexHtml, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getPreviewHtmlBoilerplate, getStyleBoilerplate, getTemplatePath, getUsageExampleBoilerplate, toPascalCase };
+export { PROJECT_TEMPLATES, generateIndexHtml, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getCssOnlyComponentBoilerplate, getPreviewHtmlBoilerplate, getStyleBoilerplate, getTemplatePath, getUsageExampleBoilerplate, toPascalCase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/templates",
-  "version": "5.0.0-beta.2",
+  "version": "5.0.0-beta.20",
   "description": "Project and generate templates for Stencil",
   "keywords": [
     "scaffolding",
@@ -33,7 +33,10 @@
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "@stencil/core": "^5.0.0 || 5.0.0-beta.2"
+    "@stencil/core": "^5.0.0 || 5.0.0-beta.20"
+  },
+  "engines": {
+    "node": ">=22.0.0"
   },
   "volta": {
     "extends": "../../package.json"

package/templates/project/component-starter/stencil.config.ts

@@ -1,6 +0,0 @@
-import type { Config } from '@stencil/core';
-
-export const config: Config = {
-  namespace: '{{NAMESPACE}}',
-  outputTargets: [{ type: 'loader-bundle' }, { type: 'types' }],
-};