@stencil/templates 5.0.0-alpha.11

package/LICENSE.md

@@ -0,0 +1,27 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-present Drifty Co.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------------------------------------
+Third-party components, software, and/or libraries (collectively, "components")
+are included under the licenses specified by their authors. For information
+about these third-party licenses, refer to the separate legal notices governing
+such components at NOTICE file at the top level of the package.

package/dist/index.d.mts

@@ -0,0 +1,75 @@
+//#region src/types.d.ts
+type StyleExtension = 'css' | 'sass' | 'scss' | 'less';
+//#endregion
+//#region src/generate/component.d.ts
+/**
+ * Returns the tag name converted to PascalCase for use as a class name.
+ *
+ * @param str - Dash-case string to convert.
+ * @returns PascalCase equivalent of `str`.
+ */
+declare function toPascalCase(str: string): string;
+/**
+ * Returns the component TSX boilerplate for `stencil generate`.
+ * Uses the v5 `encapsulation` API.
+ *
+ * @param tagName - Dash-case custom element tag name.
+ * @param styleExtension - Optional stylesheet extension (e.g. `'css'`, `'scss'`).
+ * @returns TSX source string for the new component file.
+ */
+declare function getComponentBoilerplate(tagName: string, styleExtension?: string): string;
+//#endregion
+//#region src/generate/style.d.ts
+/**
+ * Returns the stylesheet boilerplate for `stencil generate`.
+ * SASS indented syntax uses indentation instead of braces.
+ *
+ * @param ext - File extension (e.g. `'css'`, `'sass'`, `'scss'`).
+ * @returns Stylesheet source string.
+ */
+declare function getStyleBoilerplate(ext: string): string;
+//#endregion
+//#region src/project/paths.d.ts
+declare const PROJECT_TEMPLATES: readonly ["component-starter"];
+type ProjectTemplateId = (typeof PROJECT_TEMPLATES)[number];
+/**
+ * Returns the absolute path to a project template directory.
+ * Resolves from the compiled dist/ location up to the sibling templates/ directory.
+ *
+ * @param templateId - One of the known template identifiers (e.g. `'component-starter'`).
+ * @returns Absolute path to the template directory.
+ */
+declare function getTemplatePath(templateId: ProjectTemplateId): string;
+//#endregion
+//#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

@@ -0,0 +1,136 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+//#region src/generate/component.ts
+/**
+* Returns the tag name converted to PascalCase for use as a class name.
+*
+* @param str - Dash-case string to convert.
+* @returns PascalCase equivalent of `str`.
+*/
+function toPascalCase(str) {
+	return str.split("-").reduce((res, part) => res + part[0].toUpperCase() + part.slice(1), "");
+}
+/**
+* Returns the component TSX boilerplate for `stencil generate`.
+* Uses the v5 `encapsulation` API.
+*
+* @param tagName - Dash-case custom element tag name.
+* @param styleExtension - Optional stylesheet extension (e.g. `'css'`, `'scss'`).
+* @returns TSX source string for the new component file.
+*/
+function getComponentBoilerplate(tagName, styleExtension) {
+	const decorator = ["{"];
+	decorator.push(`  tag: '${tagName}',`);
+	if (styleExtension) decorator.push(`  styleUrl: '${tagName}.${styleExtension}',`);
+	decorator.push(`  encapsulation: { type: 'shadow' },`);
+	decorator.push("}");
+	return `import { Component, Host } from '@stencil/core';
+
+@Component(${decorator.join("\n")})
+export class ${toPascalCase(tagName)} {
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}
+`;
+}
+//#endregion
+//#region src/generate/style.ts
+/**
+* Returns the stylesheet boilerplate for `stencil generate`.
+* SASS indented syntax uses indentation instead of braces.
+*
+* @param ext - File extension (e.g. `'css'`, `'sass'`, `'scss'`).
+* @returns Stylesheet source string.
+*/
+function getStyleBoilerplate(ext) {
+	return ext === "sass" ? `:host\n  display: block\n` : `:host {\n  display: block;\n}\n`;
+}
+//#endregion
+//#region src/project/paths.ts
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PROJECT_TEMPLATES = ["component-starter"];
+/**
+* Returns the absolute path to a project template directory.
+* Resolves from the compiled dist/ location up to the sibling templates/ directory.
+*
+* @param templateId - One of the known template identifiers (e.g. `'component-starter'`).
+* @returns Absolute path to the template directory.
+*/
+function getTemplatePath(templateId) {
+	return join(__dirname, "..", "templates", "project", templateId);
+}
+//#endregion
+//#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

@@ -0,0 +1,43 @@
+{
+  "name": "@stencil/templates",
+  "version": "5.0.0-alpha.11",
+  "description": "Project and generate templates for Stencil",
+  "keywords": [
+    "scaffolding",
+    "stencil",
+    "templates"
+  ],
+  "homepage": "https://stenciljs.com/",
+  "license": "MIT",
+  "author": "StencilJs Contributors",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stenciljs/core.git"
+  },
+  "files": [
+    "dist/",
+    "templates/"
+  ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "devDependencies": {
+    "tsdown": ">=0.21.0 <1.0.0",
+    "typescript": ">4.0.0 <7.0.0",
+    "vitest": "^4.1.7"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "description": "A Stencil component library",
+  "license": "MIT",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "dev": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "{{STENCIL_VERSION}}"
+  },
+  "collection": "./dist/collection/collection-manifest.json"
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,27 @@
+import { Component, Prop } from '@stencil/core';
+
+import { format } from '../../utils/utils';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  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 <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}` : '');
+}

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

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

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

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "strictPropertyInitialization": false,
+    "experimentalDecorators": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@stencil/core",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "rootDir": "./"
+  },
+  "include": ["src"]
+}