feat: stencil app

README.md

@@ -40,12 +40,11 @@ pnpx degit https://github.com/LinbuduLab/starter-collections/packages/<package>
 - [Nest + Mercurius](packages/nest-mercurius-starter/)
 - [Strapi(with GraphQL)](packages/strapi-graphql-starter/)
 - MidwayJs + GraphQL
-- Apollo Element
-- Apollo Client
-- Apollo Server
+- [Apollo Element](packages/apollo-element-starter/)
+- [Apollo Client](packages/vite-apollo-gcg-starter/)
+- [Apollo Server](packages/apollo-server-starter/)
 - Envelop Plugin Starter
-- Apollo Plugin Starter
-- GraphQL Code Generator
+- [GraphQL Code Generator](packages/gcg-collections/)
 
 ### Lib
 
@@ -63,13 +62,13 @@ pnpx degit https://github.com/LinbuduLab/starter-collections/packages/<package>
 - [Astro](packages/astro-generic-starter)
 - [Umi](packages/umi-starter/) (Temporarily removed as it's not stable yet)
 - StoryBook
-- Lit
+- [Lit](packages/lit-app/)
+- [Stencil](packages/stencil-app/)
 
 ### Documentation
 
 - [Astro](packages/astro-docs-starter)
 - [VitePress](packages/vitepress-starter)
-- GitBook
 
 ## Scripts
 

ROADMAP.md

@@ -17,11 +17,3 @@
 - Mobx -> React
 - MobxStateTree + GraphQL
 - Workflow: GitHub Actions
-- Node Lib
-
-## Scripts
-
-- enable git-cz related?
-- use release-it?
-- release helper, take advantage from ... >>> workflow enhancement packages
-- npm package development helper

packages/stencil-app/.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

packages/stencil-app/.gitignore

@@ -0,0 +1,26 @@
+dist/
+!www/favicon.ico
+www/
+
+*~
+*.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

packages/stencil-app/.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
+}

packages/stencil-app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019
+
+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.

packages/stencil-app/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "stencil-app",
+  "private": true,
+  "version": "0.0.1",
+  "description": "Stencil App Starter",
+  "scripts": {
+    "build": "stencil build",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
+  },
+  "devDependencies": {
+    "@stencil/core": "2.13.0",
+    "@stencil/router": "^1.0.1",
+    "@types/jest": "^27.0.3",
+    "jest": "^27.4.5",
+    "jest-cli": "^27.4.5",
+    "puppeteer": "^10.0.0"
+  },
+  "license": "MIT"
+}

packages/stencil-app/readme.md

@@ -0,0 +1,41 @@
+# Stencil App Starter
+
+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 run-time 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 v1 spec.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all. In many cases, Stencil can be used as a drop in replacement for traditional frontend frameworks given the capabilities now available in the browser, though using it as such is certainly not required.
+
+Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).
+
+## Getting Started
+
+To start a new project using Stencil, clone this repo to a new directory:
+
+```bash
+npm init stencil app
+```
+
+and run:
+
+```bash
+npm start
+```
+
+To build the app for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests once, run:
+
+```
+npm test
+```
+
+To run the unit tests and watch for file changes during development, run:
+
+```
+npm run test.watch
+```

packages/stencil-app/src/components.d.ts

@@ -0,0 +1,66 @@
+/* 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";
+import { MatchResults } from "@stencil/router";
+export namespace Components {
+    interface AppHome {
+    }
+    interface AppProfile {
+        "match": MatchResults;
+    }
+    interface AppRoot {
+    }
+}
+declare global {
+    interface HTMLAppHomeElement extends Components.AppHome, HTMLStencilElement {
+    }
+    var HTMLAppHomeElement: {
+        prototype: HTMLAppHomeElement;
+        new (): HTMLAppHomeElement;
+    };
+    interface HTMLAppProfileElement extends Components.AppProfile, HTMLStencilElement {
+    }
+    var HTMLAppProfileElement: {
+        prototype: HTMLAppProfileElement;
+        new (): HTMLAppProfileElement;
+    };
+    interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {
+    }
+    var HTMLAppRootElement: {
+        prototype: HTMLAppRootElement;
+        new (): HTMLAppRootElement;
+    };
+    interface HTMLElementTagNameMap {
+        "app-home": HTMLAppHomeElement;
+        "app-profile": HTMLAppProfileElement;
+        "app-root": HTMLAppRootElement;
+    }
+}
+declare namespace LocalJSX {
+    interface AppHome {
+    }
+    interface AppProfile {
+        "match"?: MatchResults;
+    }
+    interface AppRoot {
+    }
+    interface IntrinsicElements {
+        "app-home": AppHome;
+        "app-profile": AppProfile;
+        "app-root": AppRoot;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "app-home": LocalJSX.AppHome & JSXBase.HTMLAttributes<HTMLAppHomeElement>;
+            "app-profile": LocalJSX.AppProfile & JSXBase.HTMLAttributes<HTMLAppProfileElement>;
+            "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+        }
+    }
+}

packages/stencil-app/src/components/app-home/app-home.css

@@ -0,0 +1,25 @@
+.app-home {
+  padding: 10px;
+}
+
+button {
+  background: #5851ff;
+  color: white;
+  margin: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 16px 20px;
+  border-radius: 2px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+  outline: 0;
+  letter-spacing: 0.04em;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+
+button:hover {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
+  transform: translateY(1px);
+}

packages/stencil-app/src/components/app-home/app-home.e2e.ts

@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-home', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-home></app-home>');
+
+    const element = await page.find('app-home');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('contains a "Profile Page" button', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-home></app-home>');
+
+    const element = await page.find('app-home >>> button');
+    expect(element.textContent).toEqual('Profile page');
+  });
+});

packages/stencil-app/src/components/app-home/app-home.tsx

@@ -0,0 +1,23 @@
+import { Component, h } from '@stencil/core';
+
+@Component({
+  tag: 'app-home',
+  styleUrl: 'app-home.css',
+  shadow: true,
+})
+export class AppHome {
+  render() {
+    return (
+      <div class="app-home">
+        <p>
+          Welcome to the Stencil App Starter. You can use this starter to build entire apps all with web components using Stencil! Check out our docs on{' '}
+          <a href="https://stenciljs.com">stenciljs.com</a> to get started.
+        </p>
+
+        <stencil-route-link url="/profile/stencil">
+          <button>Profile page</button>
+        </stencil-route-link>
+      </div>
+    );
+  }
+}

packages/stencil-app/src/components/app-profile/app-profile.css

@@ -0,0 +1,3 @@
+.app-profile {
+  padding: 10px;
+}

packages/stencil-app/src/components/app-profile/app-profile.e2e.ts

@@ -0,0 +1,27 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('app-profile', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<app-profile></app-profile>');
+
+    const element = await page.find('app-profile');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('displays the specified name', async () => {
+    const page = await newE2EPage({ url: '/profile/joseph' });
+
+    const profileElement = await page.find('app-root >>> app-profile');
+    const element = profileElement.shadowRoot.querySelector('div');
+    expect(element.textContent).toContain('Hello! My name is Joseph.');
+  });
+
+  // it('includes a div with the class "app-profile"', async () => {
+  //   const page = await newE2EPage({ url: '/profile/joseph' });
+
+  // I would like to use a selector like this above, but it does not seem to work
+  //   const element = await page.find('app-root >>> app-profile >>> div');
+  //   expect(element).toHaveClass('app-profile');
+  // });
+});