From ff9d18610cef0fc5a0cafa804c4cf8f92529b24f Mon Sep 17 00:00:00 2001 From: Ninosaurier Date: Sun, 12 Jul 2026 13:43:50 +0200 Subject: [PATCH] build(stencil): initialize stencil workspace --- packages/luna-charts/.editorconfig | 15 +++ packages/luna-charts/.gitignore | 26 ++++ packages/luna-charts/.prettierrc.json | 13 ++ packages/luna-charts/LICENSE | 21 ++++ packages/luna-charts/package.json | 50 ++++++++ packages/luna-charts/readme.md | 111 ++++++++++++++++++ packages/luna-charts/src/components.d.ts | 68 +++++++++++ .../my-component/my-component.cmp.test.tsx | 31 +++++ .../components/my-component/my-component.css | 3 + .../components/my-component/my-component.tsx | 32 +++++ .../src/components/my-component/readme.md | 19 +++ packages/luna-charts/src/index.html | 14 +++ packages/luna-charts/src/index.ts | 12 ++ packages/luna-charts/src/utils/utils.ts | 3 + .../luna-charts/src/utils/utils.unit.test.ts | 20 ++++ packages/luna-charts/stencil.config.ts | 23 ++++ packages/luna-charts/tsconfig.json | 30 +++++ packages/luna-charts/vitest-setup.ts | 3 + packages/luna-charts/vitest.config.ts | 32 +++++ 19 files changed, 526 insertions(+) create mode 100644 packages/luna-charts/.editorconfig create mode 100644 packages/luna-charts/.gitignore create mode 100644 packages/luna-charts/.prettierrc.json create mode 100644 packages/luna-charts/LICENSE create mode 100644 packages/luna-charts/package.json create mode 100644 packages/luna-charts/readme.md create mode 100644 packages/luna-charts/src/components.d.ts create mode 100644 packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx create mode 100644 packages/luna-charts/src/components/my-component/my-component.css create mode 100644 packages/luna-charts/src/components/my-component/my-component.tsx create mode 100644 packages/luna-charts/src/components/my-component/readme.md create mode 100644 packages/luna-charts/src/index.html create mode 100644 packages/luna-charts/src/index.ts create mode 100644 packages/luna-charts/src/utils/utils.ts create mode 100644 packages/luna-charts/src/utils/utils.unit.test.ts create mode 100644 packages/luna-charts/stencil.config.ts create mode 100644 packages/luna-charts/tsconfig.json create mode 100644 packages/luna-charts/vitest-setup.ts create mode 100644 packages/luna-charts/vitest.config.ts diff --git a/packages/luna-charts/.editorconfig b/packages/luna-charts/.editorconfig new file mode 100644 index 0000000..f1cc3ad --- /dev/null +++ b/packages/luna-charts/.editorconfig @@ -0,0 +1,15 @@ +# http://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/packages/luna-charts/.gitignore b/packages/luna-charts/.gitignore new file mode 100644 index 0000000..c3ea58a --- /dev/null +++ b/packages/luna-charts/.gitignore @@ -0,0 +1,26 @@ +dist/ +www/ +loader/ + +*~ +*.sw[mnpcod] +*.log +*.lock +*.tmp +*.tmp.* +log.txt +*.sublime-project +*.sublime-workspace + +.stencil/ +.idea/ +.vscode/ +.sass-cache/ +.versions/ +node_modules/ +$RECYCLE.BIN/ + +.DS_Store +Thumbs.db +UserInterfaceState.xcuserstate +.env diff --git a/packages/luna-charts/.prettierrc.json b/packages/luna-charts/.prettierrc.json new file mode 100644 index 0000000..7ca3a28 --- /dev/null +++ b/packages/luna-charts/.prettierrc.json @@ -0,0 +1,13 @@ +{ + "arrowParens": "avoid", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "jsxSingleQuote": false, + "quoteProps": "consistent", + "printWidth": 180, + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "all", + "useTabs": false +} diff --git a/packages/luna-charts/LICENSE b/packages/luna-charts/LICENSE new file mode 100644 index 0000000..c13f991 --- /dev/null +++ b/packages/luna-charts/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 + +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. diff --git a/packages/luna-charts/package.json b/packages/luna-charts/package.json new file mode 100644 index 0000000..da73be6 --- /dev/null +++ b/packages/luna-charts/package.json @@ -0,0 +1,50 @@ +{ + "name": "luna-charts", + "version": "0.0.1", + "description": "Stencil Component Starter", + "main": "dist/index.cjs.js", + "module": "dist/index.js", + "types": "dist/types/index.d.ts", + "collection": "dist/collection/collection-manifest.json", + "collection:main": "dist/collection/index.js", + "unpkg": "dist/luna-charts/luna-charts.esm.js", + "exports": { + ".": { + "import": "./dist/luna-charts/luna-charts.esm.js", + "require": "./dist/luna-charts/luna-charts.cjs.js" + }, + "./my-component": { + "import": "./dist/components/my-component.js", + "types": "./dist/components/my-component.d.ts" + }, + "./loader": { + "import": "./loader/index.js", + "require": "./loader/index.cjs", + "types": "./loader/index.d.ts" + } + }, + "repository": { + "type": "git", + "url": "https://github.com/stenciljs/component-starter.git" + }, + "files": [ + "dist/", + "loader/" + ], + "scripts": { + "build": "stencil build", + "start": "stencil build --dev --watch --serve", + "test": "stencil-test --prod", + "test:watch": "stencil-test --prod --watch", + "generate": "stencil generate" + }, + "devDependencies": { + "@stencil/core": "^4.27.1 || ^5.0.0-0", + "@stencil/vitest": "^1.8.3", + "@types/node": "^22.13.5", + "@vitest/browser-playwright": "^4.0.0", + "playwright": "^1.52.0", + "vitest": "^4.0.0" + }, + "license": "MIT" +} diff --git a/packages/luna-charts/readme.md b/packages/luna-charts/readme.md new file mode 100644 index 0000000..66e26f8 --- /dev/null +++ b/packages/luna-charts/readme.md @@ -0,0 +1,111 @@ +[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com) + +# Stencil Component Starter + +> This is a starter project for building a standalone Web Components using Stencil. + +Stencil is a compiler for building fast web apps using Web Components. + +Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification. + +Stencil components are just Web Components, so they work in any major framework or with no framework at all. + +## Getting Started + +To start building a new web component using Stencil, clone this repo to a new directory: + +```bash +git clone https://github.com/stenciljs/component-starter.git my-component +cd my-component +git remote rm origin +``` + +and run: + +```bash +npm install +npm start +``` + +To build the component for production, run: + +```bash +npm run build +``` + +To run the unit tests for the components, run: + +```bash +npm test +``` + +Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component). + +## Naming Components + +When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: ``). This is because the generated component has little to nothing to do with Stencil; it's just a web component! + +Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`. + +## Using this component + +There are two strategies we recommend for using web components built with Stencil. + +The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages). + +You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing). + +### Lazy Loading + +If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily. + +For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML: + +```html + + + +``` + +This will only load the necessary scripts needed to render ``. Once more components of this package are used, they will automatically be loaded lazily. + +You can also import the script as part of your `node_modules` in your applications entry file: + +```tsx +import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js'; +``` + +Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx). + +### Standalone + +If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed. + +To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`. + +For example, given you'd like to use `` as part of a React component, you can import the component directly via: + +```tsx +import 'foobar-design-system/my-component'; + +function App() { + return ( + <> +
+ +
+ + ); +} + +export default App; +``` + +Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx). \ No newline at end of file diff --git a/packages/luna-charts/src/components.d.ts b/packages/luna-charts/src/components.d.ts new file mode 100644 index 0000000..fdfe7a8 --- /dev/null +++ b/packages/luna-charts/src/components.d.ts @@ -0,0 +1,68 @@ +/* eslint-disable */ +/* tslint:disable */ +/** + * This is an autogenerated file created by the Stencil compiler. + * It contains typing information for all components that exist in this project. + */ +import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; +export namespace Components { + interface MyComponent { + /** + * The first name + */ + "first": string; + /** + * The last name + */ + "last": string; + /** + * The middle name + */ + "middle": string; + } +} +declare global { + interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement { + } + var HTMLMyComponentElement: { + prototype: HTMLMyComponentElement; + new (): HTMLMyComponentElement; + }; + interface HTMLElementTagNameMap { + "my-component": HTMLMyComponentElement; + } +} +declare namespace LocalJSX { + interface MyComponent { + /** + * The first name + */ + "first"?: string; + /** + * The last name + */ + "last"?: string; + /** + * The middle name + */ + "middle"?: string; + } + + interface MyComponentAttributes { + "first": string; + "middle": string; + "last": string; + } + + interface IntrinsicElements { + "my-component": Omit & { [K in keyof MyComponent & keyof MyComponentAttributes]?: MyComponent[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `attr:${K}`]?: MyComponentAttributes[K] } & { [K in keyof MyComponent & keyof MyComponentAttributes as `prop:${K}`]?: MyComponent[K] }; + } +} +export { LocalJSX as JSX }; +declare module "@stencil/core" { + export namespace JSX { + interface IntrinsicElements { + "my-component": LocalJSX.IntrinsicElements["my-component"] & JSXBase.HTMLAttributes; + } + } +} diff --git a/packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx b/packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx new file mode 100644 index 0000000..a3a2076 --- /dev/null +++ b/packages/luna-charts/src/components/my-component/my-component.cmp.test.tsx @@ -0,0 +1,31 @@ +import { render, h, describe, it, expect } from '@stencil/vitest'; + +describe('my-component', () => { + it('renders', async () => { + const { root } = await render(); + await expect(root).toEqualHtml(` + + +
+ Hello, World! I'm +
+ + + `); + }); + + it('renders with values', async () => { + const { root } = await render( + , + ); + await expect(root).toEqualHtml(` + + +
+ Hello, World! I'm Stencil 'Don't call me a framework' JS +
+ + + `); + }); +}); diff --git a/packages/luna-charts/src/components/my-component/my-component.css b/packages/luna-charts/src/components/my-component/my-component.css new file mode 100644 index 0000000..5d4e87f --- /dev/null +++ b/packages/luna-charts/src/components/my-component/my-component.css @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/packages/luna-charts/src/components/my-component/my-component.tsx b/packages/luna-charts/src/components/my-component/my-component.tsx new file mode 100644 index 0000000..5dd72b8 --- /dev/null +++ b/packages/luna-charts/src/components/my-component/my-component.tsx @@ -0,0 +1,32 @@ +import { Component, Prop, h } from '@stencil/core'; +import { format } from '../../utils/utils'; + +@Component({ + tag: 'my-component', + styleUrl: 'my-component.css', + shadow: true, +}) +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
Hello, World! I'm {this.getText()}
; + } +} diff --git a/packages/luna-charts/src/components/my-component/readme.md b/packages/luna-charts/src/components/my-component/readme.md new file mode 100644 index 0000000..06b5864 --- /dev/null +++ b/packages/luna-charts/src/components/my-component/readme.md @@ -0,0 +1,19 @@ +# my-component + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | --------------- | -------- | ----------- | +| `first` | `first` | The first name | `string` | `undefined` | +| `last` | `last` | The last name | `string` | `undefined` | +| `middle` | `middle` | The middle name | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/luna-charts/src/index.html b/packages/luna-charts/src/index.html new file mode 100644 index 0000000..0653289 --- /dev/null +++ b/packages/luna-charts/src/index.html @@ -0,0 +1,14 @@ + + + + + + Stencil Component Starter + + + + + + + + diff --git a/packages/luna-charts/src/index.ts b/packages/luna-charts/src/index.ts new file mode 100644 index 0000000..fc07dff --- /dev/null +++ b/packages/luna-charts/src/index.ts @@ -0,0 +1,12 @@ +/** + * @fileoverview entry point for your component library + * + * This is the entry point for your component library. Use this file to export utilities, + * constants or data structure that accompany your components. + * + * DO NOT use this file to export your components. Instead, use the recommended approaches + * to consume components of this package as outlined in the `README.md`. + */ + +export { format } from './utils/utils'; +export type * from './components.d.ts'; diff --git a/packages/luna-charts/src/utils/utils.ts b/packages/luna-charts/src/utils/utils.ts new file mode 100644 index 0000000..b1a0b3d --- /dev/null +++ b/packages/luna-charts/src/utils/utils.ts @@ -0,0 +1,3 @@ +export function format(first?: string, middle?: string, last?: string): string { + return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''); +} diff --git a/packages/luna-charts/src/utils/utils.unit.test.ts b/packages/luna-charts/src/utils/utils.unit.test.ts new file mode 100644 index 0000000..4cc0dde --- /dev/null +++ b/packages/luna-charts/src/utils/utils.unit.test.ts @@ -0,0 +1,20 @@ +import { describe, it, expect } from 'vitest'; +import { format } from './utils'; + +describe('format', () => { + it('returns empty string for no names defined', () => { + expect(format(undefined, undefined, undefined)).toEqual(''); + }); + + it('formats just first names', () => { + expect(format('Joseph', undefined, undefined)).toEqual('Joseph'); + }); + + it('formats first and last names', () => { + expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique'); + }); + + it('formats first, middle and last names', () => { + expect(format('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique'); + }); +}); diff --git a/packages/luna-charts/stencil.config.ts b/packages/luna-charts/stencil.config.ts new file mode 100644 index 0000000..251b97d --- /dev/null +++ b/packages/luna-charts/stencil.config.ts @@ -0,0 +1,23 @@ +import { Config } from '@stencil/core'; + +export const config: Config = { + namespace: 'luna-charts', + outputTargets: [ + { + type: 'dist', + esmLoaderPath: '../loader', + }, + { + type: 'dist-custom-elements', + customElementsExportBehavior: 'auto-define-custom-elements', + externalRuntime: false, + }, + { + type: 'docs-readme', + }, + { + type: 'www', + serviceWorker: null, // disable service workers + }, + ], +}; diff --git a/packages/luna-charts/tsconfig.json b/packages/luna-charts/tsconfig.json new file mode 100644 index 0000000..cf248d6 --- /dev/null +++ b/packages/luna-charts/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "allowUnreachableCode": false, + "declaration": false, + "experimentalDecorators": true, + "lib": [ + "dom", + "es2022" + ], + "moduleResolution": "bundler", + "module": "esnext", + "target": "es2022", + "noUnusedLocals": true, + "noUnusedParameters": true, + "rootDir": "./", + "jsx": "react", + "jsxFactory": "h", + "jsxFragmentFactory": "h.Fragment", + "types": [ + "@stencil/vitest/globals" + ] + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules" + ] +} diff --git a/packages/luna-charts/vitest-setup.ts b/packages/luna-charts/vitest-setup.ts new file mode 100644 index 0000000..1c397f3 --- /dev/null +++ b/packages/luna-charts/vitest-setup.ts @@ -0,0 +1,3 @@ +import { defineCustomElements } from "./loader"; + +defineCustomElements(); \ No newline at end of file diff --git a/packages/luna-charts/vitest.config.ts b/packages/luna-charts/vitest.config.ts new file mode 100644 index 0000000..1a41f9d --- /dev/null +++ b/packages/luna-charts/vitest.config.ts @@ -0,0 +1,32 @@ +import { defineVitestConfig } from '@stencil/vitest/config'; +import { playwright } from '@vitest/browser-playwright'; + +export default defineVitestConfig({ + stencilConfig: './stencil.config.ts', + test: { + projects: [ + // Unit tests - stencil environment for component logic + { + test: { + name: 'unit', + include: ['src/**/*.unit.test.{ts,tsx}'], + environment: 'stencil', + }, + }, + // Component browser tests - real browser via Playwright + { + test: { + name: 'browser', + include: ['src/**/*.cmp.test.{ts,tsx}'], + setupFiles: ['./vitest-setup.ts'], + browser: { + enabled: true, + provider: playwright(), + headless: true, + instances: [{ browser: 'chromium' }], + }, + }, + }, + ], + }, +});