@stencil/templates 5.0.0-alpha.22 → 5.0.0-alpha.24

package/dist/index.d.mts

@@ -72,4 +72,42 @@ declare function generateStencilConfig(sel: ConfigSelections): string | null;
  */
 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 };
+//#region src/project/index-html.d.ts
+interface IndexHtmlSelections {
+  projectName: string;
+  namespace: string;
+  globalStyle: boolean;
+}
+/**
+ * Returns src/index.html source for a `www`-output project: entry <script> tag pointing
+ * at the compiled bundle, and a <link> to the global stylesheet if one was selected.
+ *
+ * @param sel - Wizard selections to encode into the HTML file.
+ * @returns HTML source string.
+ */
+declare function generateIndexHtml(sel: IndexHtmlSelections): string;
+//#endregion
+//#region src/generate/preview.d.ts
+/**
+ * Returns the `usage/example.md` boilerplate for `stencil generate`. Read by the docs
+ * pipeline (readme / docs-json / custom-elements-manifest demos) and by the dev server's
+ * live component preview.
+ *
+ * @param tagName - Dash-case custom element tag name.
+ * @returns Markdown source string.
+ */
+declare function getUsageExampleBoilerplate(tagName: string): string;
+/**
+ * Returns a standalone index.html boilerplate for `stencil generate`, scoped to a single
+ * component's own directory. Its presence opts that directory out of the dev server's
+ * auto-generated preview, trading it for a hand-authored demo page.
+ *
+ * @param tagName - Dash-case custom element tag name.
+ * @param entryScriptSrc - Resolved src for the project's browser entry bundle (see
+ * `resolveEntryScriptSrc` in the CLI package), or `null` if the project has no browser-loadable
+ * output target (e.g. an SSR-only project) - the script tag is omitted in that case.
+ * @returns HTML source 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 };

package/dist/index.mjs

@@ -133,4 +133,78 @@ function generatePackageJsonFields(outputs) {
 	return {};
 }
 //#endregion
-export { PROJECT_TEMPLATES, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };
+//#region src/project/index-html.ts
+/**
+* Returns src/index.html source for a `www`-output project: entry <script> tag pointing
+* at the compiled bundle, and a <link> to the global stylesheet if one was selected.
+*
+* @param sel - Wizard selections to encode into the HTML file.
+* @returns HTML source string.
+*/
+function generateIndexHtml(sel) {
+	const fsNamespace = sel.namespace.toLowerCase();
+	const headLines = [
+		`    <meta charset="UTF-8" />`,
+		`    <title>${sel.projectName}</title>`,
+		`    <meta name="viewport" content="width=device-width, initial-scale=1" />`
+	];
+	if (sel.globalStyle) headLines.push(`    <link rel="stylesheet" href="/build/${fsNamespace}.css" />`);
+	headLines.push(`    <script type="module" src="/build/${fsNamespace}.js"><\/script>`);
+	return [
+		`<!doctype html>`,
+		`<html lang="en">`,
+		`  <head>`,
+		...headLines,
+		`  </head>`,
+		`  <body>`,
+		`    <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>`,
+		`  </body>`,
+		`</html>`,
+		``
+	].join("\n");
+}
+//#endregion
+//#region src/generate/preview.ts
+/**
+* Returns the `usage/example.md` boilerplate for `stencil generate`. Read by the docs
+* pipeline (readme / docs-json / custom-elements-manifest demos) and by the dev server's
+* live component preview.
+*
+* @param tagName - Dash-case custom element tag name.
+* @returns Markdown source string.
+*/
+function getUsageExampleBoilerplate(tagName) {
+	return `# Example
+
+\`\`\`html
+<${tagName}></${tagName}>
+\`\`\`
+`;
+}
+/**
+* Returns a standalone index.html boilerplate for `stencil generate`, scoped to a single
+* component's own directory. Its presence opts that directory out of the dev server's
+* auto-generated preview, trading it for a hand-authored demo page.
+*
+* @param tagName - Dash-case custom element tag name.
+* @param entryScriptSrc - Resolved src for the project's browser entry bundle (see
+* `resolveEntryScriptSrc` in the CLI package), or `null` if the project has no browser-loadable
+* output target (e.g. an SSR-only project) - the script tag is omitted in that case.
+* @returns HTML source string.
+*/
+function getPreviewHtmlBoilerplate(tagName, entryScriptSrc) {
+	return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>${tagName}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+${entryScriptSrc ? `    <script type="module" src="${entryScriptSrc}"><\/script>\n` : `    <!-- no browser-loadable output target configured - add your own entry script -->\n`}  </head>
+  <body>
+    <${tagName}></${tagName}>
+  </body>
+</html>
+`;
+}
+//#endregion
+export { PROJECT_TEMPLATES, generateIndexHtml, generatePackageJsonFields, generateStencilConfig, getComponentBoilerplate, getPreviewHtmlBoilerplate, getStyleBoilerplate, getTemplatePath, getUsageExampleBoilerplate, toPascalCase };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/templates",
-  "version": "5.0.0-alpha.22",
+  "version": "5.0.0-alpha.24",
   "description": "Project and generate templates for Stencil",
   "keywords": [
     "scaffolding",
@@ -33,7 +33,7 @@
     "vitest": "^4.1.7"
   },
   "peerDependencies": {
-    "@stencil/core": "^5.0.0 || 5.0.0-alpha.22"
+    "@stencil/core": "^5.0.0 || 5.0.0-alpha.24"
   },
   "volta": {
     "extends": "../../package.json"