@stencil/templates 5.0.0-alpha.6

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+//#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
+export { PROJECT_TEMPLATES, type ProjectTemplateId, type StyleExtension, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };

package/dist/index.mjs

@@ -0,0 +1,68 @@
+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
+export { PROJECT_TEMPLATES, getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@stencil/templates",
+  "version": "5.0.0-alpha.6",
+  "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"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "description": "A Stencil component library",
+  "license": "MIT",
+  "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"
+  },
+  "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,16 @@
+import { Component, Host } from '@stencil/core';
+
+@Component({
+  tag: 'my-component',
+  styleUrl: 'my-component.css',
+  encapsulation: { type: 'shadow' },
+})
+export class MyComponent {
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

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"]
+}