feat(temp):add stencil js

Author: guocaoyi

.gitignore

@@ -15,6 +15,7 @@ pnpm-lock.yaml
 build
 types
 index.js
+!**/index.js
 
 # ignore ide settings
 .idea

CHANGELOG.md

@@ -9,6 +9,10 @@ Summary
   5. version timestamp follow the yyyy.MM.dd format
 ```
 
+## 0.8.1 [2022.09.09]
+
+- docs: add zn_CN readme
+
 ## 0.8.0 [2022.09.05]
 
 - remove: qwik framework boilerplate

README_zh.md

@@ -0,0 +1,81 @@
+# Create Chrome Extension (.crx)
+
+![crx-preview](./docs/crx-preview.png)
+
+[![OSCS Status](https://www.oscs1024.com/platform/badge/guocaoyi/create-chrome-ext.svg?size=small)](https://www.oscs1024.com/project/guocaoyi/create-chrome-ext?ref=badge_small)
+[![npm](https://img.shields.io/npm/v/create-chrome-ext?logo=npm)](https://www.npmjs.com/package/create-chrome-ext)
+[![npm-download](https://img.shields.io/npm/dw/create-chrome-ext)](https://www.npmjs.com/package/create-chrome-ext)
+![GitHub Language Count](https://img.shields.io/github/languages/count/guocaoyi/create-chrome-ext)
+[![npm publish](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/guocaoyi/create-chrome-ext/actions/workflows/npm-publish.yml)
+
+> Chrome 插件生成器，支持多种框架模板！
+
+- 🚀 敏捷的热更能力(采用 [Vite2](https://vitejs.dev))
+- 🥡 开箱即用
+- 🌈 多种前端框架支撑 (9+)
+- 🥢 支撑 TypeScript 以及 JavaScript
+- 🌗 明亮以及暗黑模式
+
+[EN](./README.md) · [中文](./README_zh.md)
+
+## 安装
+
+> Node >= 14.18.0
+
+```bash
+# 使用 npm create 命令
+λ npm create chrome-ext
+
+# 或者使用 npx 命令
+λ npx create-chrome-ext
+
+# 或者使用 npm init 命令
+λ npm init chrome-ext
+```
+
+## 用例
+
+您还可以通过其他命令行配置直接指定项目名称和要使用的模板。比如 Vite + Svelte 项目，运行：
+
+```bash
+# npm 6.x
+λ npm create chrome-ext@latest my-crx-app --template svelte-js
+
+# npm 版本 7 以上， 注意 -- 命令选项
+λ npm create chrome-ext@latest my-crx-app -- --template react-ts
+
+# or yarn
+λ yarn create chrome-ext my-crx-app --template vue-ts
+
+# or pnpm
+λ pnpm create chrome-ext my-crx-app --template vanilla-ts
+```
+
+You can also generator the project with `crx` cli, run:
+
+```bash
+λ npm install create-chrome-ext --global
+
+# and then
+λ crx my-crx-app
+# or
+λ crx my-crx-app --template preact-js
+# or use create-chrome-exe (global env)
+λ create-chrome-ext my-crx-app
+```
+
+## 模板
+
+预置的前端架构：
+
+[React](https://reactjs.org) · [Vue](https://vuejs.org) · [Svelte](https://svelte.dev) · [Preact](https://preactjs.com) · [Solid](https://www.solidjs.com) · [Alpine](https://alpinejs.dev) · [Lit](https://lit.dev) · [Inferno](https://www.infernojs.org) · [Stencil](https://stenciljs.com) · [Vanilla](http://vanilla-js.com)
+
+语言支持：
+
+[JavaScript](https://www.javascript.com/) · [TypeScript](https://www.typescriptlang.org/)
+
+## 预览
+
+![crx-run](./docs/crx-run.png)
+![crx-install](./docs/crx-install.png)
+![crx-build](./docs/crx-build.png)

bin.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+import './index.js'

index.d.ts

@@ -1,6 +1,3 @@
-#!/usr/bin/env node
-
-// @ts-check
 import * as fs from 'fs'
 import * as path from 'path'
 import minimist from 'minimist'

index.ts

@@ -1,11 +1,11 @@
 {
   "name": "create-chrome-ext",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "description": "Scaffolding your chrome extension, multiple boilerplates supported!",
   "author": "yalda",
   "license": "MIT",
-  "main": "index.js",
+  "main": "bin.js",
   "bin": {
     "create-chrome-ext": "index.js",
     "crx": "index.js"

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "chrome-extension-stencil-js",
+  "version": "0.0.0",
+  "author": "",
+  "description": "",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "chrome-extension",
+    "stencil",
+    "vite",
+    "create-chrome-ext"
+  ],
+  "engines": {
+    "node": ">=14.18.0"
+  },
+  "scripts": {
+    "s:build": "stencil build",
+    "s:start": "stencil build --dev --watch --serve",
+    "s:test": "stencil test --spec --e2e",
+    "s:test.watch": "stencil test --spec --e2e --watchAll",
+    "s:generate": "stencil generate",
+    "dev": "vite",
+    "build": "vite build",
+    "build.client": "vite build --outDir server/public",
+    "preview": "vite preview",
+    "fmt": "prettier --write '**/*.{jsx,js,json,css,md}'"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^1.0.12",
+    "@stencil/core": "2.13.0",
+    "express": "4.17.2",
+    "prettier": "^2.7.1",
+    "vite": "^2.9.13"
+  }
+}

template-stencil-js/package.json

@@ -0,0 +1,3 @@
+console.info('chrome-ext template-stencil-js background script')
+
+export {}

template-stencil-js/public/icons/logo.ico

@@ -0,0 +1,33 @@
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}

template-stencil-js/public/icons/logo.svg

@@ -0,0 +1,25 @@
+import { Component, Prop, h } from '@stencil/core'
+
+@Component({
+  tag: 'app-options',
+  styleUrl: 'app-options.css',
+})
+export class AppOptions {
+  @Prop() crx: string = ''
+
+  render() {
+    return (
+      <main>
+        <h3>Options Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {this.crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default AppOptions

template-stencil-js/public/img/logo-128.png

@@ -0,0 +1,33 @@
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h3 {
+  color: #673ab8;
+  text-transform: uppercase;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.2rem;
+  margin: 2rem auto;
+}
+
+h6 {
+  font-size: 0.5rem;
+  color: #333333;
+  margin: 0.5rem;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}
+
+@media (min-width: 480px) {
+  h3 {
+    max-width: none;
+  }
+}

template-stencil-js/public/img/logo-16.png

@@ -0,0 +1,25 @@
+import { Component, Prop, h } from '@stencil/core'
+
+@Component({
+  tag: 'app-popup',
+  styleUrl: 'app-popup.css',
+})
+export class AppPopup {
+  @Prop() crx: string = ''
+
+  render() {
+    return (
+      <main>
+        <h3>Popup Page!</h3>
+
+        <h6>v 0.0.0</h6>
+
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {this.crx}
+        </a>
+      </main>
+    )
+  }
+}
+
+export default AppPopup

template-stencil-js/public/img/logo-34.png

@@ -0,0 +1,3 @@
+console.info('chrome-ext template-stencil-js content script')
+
+export {}

template-stencil-js/public/img/logo-48.png

@@ -0,0 +1,45 @@
+/*
+  Global App CSS
+  ----------------------
+  Use this file for styles that should be applied to all components.
+  For example, "font-family" within the "body" selector is a CSS property
+  most apps will want applied to all components.
+
+  Any global CSS variables should also be applied here.
+*/
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0px;
+  padding: 0px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}

template-stencil-js/src/assets/logo.png

@@ -0,0 +1,7 @@
+export default async () => {
+  /**
+   * The code to be executed should be placed within a default function that is
+   * exported by the global script. Ensure all of the code in the global script
+   * is wrapped in the function() that is exported.
+   */
+};

template-stencil-js/src/background/index.js

@@ -0,0 +1,2 @@
+export { Components, JSX } from './components';
+import '@stencil-community/router';

template-stencil-js/src/components/app-options/app-options.css

@@ -0,0 +1,36 @@
+import { defineManifest } from '@crxjs/vite-plugin'
+
+export default defineManifest({
+  name: 'create-chrome-ext',
+  description: '',
+  version: '0.0.0',
+  manifest_version: 3,
+  icons: {
+    16: 'img/logo-16.png',
+    32: 'img/logo-34.png',
+    48: 'img/logo-48.png',
+    128: 'img/logo-128.png',
+  },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
+  options_page: 'options.html',
+  background: {
+    service_worker: 'src/background/index.js',
+    type: 'module',
+  },
+  content_scripts: [
+    {
+      matches: ['http://*/*', 'https://*/*'],
+      js: ['src/content/index.js'],
+    },
+  ],
+  web_accessible_resources: [
+    {
+      resources: ['img/logo-16.png', 'img/logo-34.png', 'img/logo-48.png', 'img/logo-128.png'],
+      matches: [],
+    },
+  ],
+  permissions: [],
+})