build: add snowpack to debug

Author: OpportunityLiu

.eslintignore

@@ -1,5 +1,5 @@
 
-/dist
+/publish
 /*.js
 .*.{js,ts}
 

.gitignore

@@ -1,5 +1,5 @@
 # compiled output
-/dist/
+/publish/
 
 # packages
 /node_modules/

README.md

@@ -1 +1 @@
-# web-components
+# web-components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudpss/web-components",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -12,10 +12,12 @@
     "url": "https://github.com/CloudPSS/web-components/issues"
   },
   "scripts": {
-    "compile": "tsc",
+    "start": "snowpack dev",
     "clean": "rimraf dist",
-    "build": "yarn clean && yarn compile",
-    "postbuild": "node postbuild.js"
+    "build": "yarn clean && tsc",
+    "postbuild": "node postbuild.js",
+    "format": "prettier --write --ignore-path .gitignore .",
+    "lint": "eslint ."
   },
   "dependencies": {
     "chart.js": "^2.9.4",
@@ -48,6 +50,7 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
+    "@snowpack/plugin-typescript": "^1.1.0",
     "@types/chart.js": "^2.9.27",
     "@types/katex": "^0.11.0",
     "@types/linkify-it": "^2.1.0",
@@ -69,6 +72,7 @@
     "lint-staged": "^10.5.1",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
+    "snowpack": "^2.16.1",
     "type-fest": "^0.18.0",
     "typescript": "~4.0.5"
   }

postbuild.js

@@ -10,14 +10,14 @@ async function main() {
     const sourceObj = JSON.parse(source);
     sourceObj.scripts = undefined;
     sourceObj.devDependencies = undefined;
-    await fs.writeFile(path.resolve(__dirname, './dist/package.json'), JSON.stringify(sourceObj, null, 2), 'utf-8');
+    await fs.writeFile(path.resolve(__dirname, './publish/package.json'), JSON.stringify(sourceObj, null, 2), 'utf-8');
     await copy('./src');
     await copy('./README.md');
     await copy('./LICENSE');
 }
 
 async function copy(file) {
-    await fs.copy(path.resolve(__dirname, file), path.resolve(__dirname, './dist/', file));
+    await fs.copy(path.resolve(__dirname, file), path.resolve(__dirname, './publish/', file));
 }
 
 main();

snowpack.config.js

@@ -0,0 +1,19 @@
+/** @type {import("snowpack").SnowpackUserConfig } */
+module.exports = {
+    mount: {
+        stat: '/',
+        src: '/_dist_',
+    },
+    plugins: ['@snowpack/plugin-typescript'],
+    install: [],
+    installOptions: {
+        installTypes: true,
+        polyfillNode: true,
+    },
+    devOptions: {},
+    buildOptions: {
+        out: 'publish',
+    },
+    proxy: {},
+    alias: {},
+};

src/highlight.ts

@@ -173,6 +173,7 @@ export class HighlightElement extends UpdatingElement {
      * @inheritdoc
      */
     async performUpdate(): Promise<unknown> {
+        this.elCode.textContent = this.srcdoc ?? '';
         await init();
         return super.performUpdate();
     }
@@ -195,6 +196,7 @@ export class HighlightElement extends UpdatingElement {
             if (highlighter) {
                 this.elCode.innerHTML = Prism.highlight(code, Prism.languages[lang], lang);
             } else {
+                this.elCode.textContent = code;
                 const autoloader = Prism.plugins.autoloader as {
                     loadLanguages: (name: string, callback: () => void) => void;
                 };

src/markdown.css.ts src/markdown.styles.ts

@@ -1,6 +1,6 @@
 import { customElement, property, PropertyValues, UpdatingElement } from 'lit-element';
 import markdownIt from './private/markdown';
-import styles from './markdown.css';
+import styles from './markdown.styles';
 
 let fm: string | undefined;
 let src: URL | undefined;

src/markdown.ts

@@ -1,4 +1,4 @@
-import * as katex from 'katex';
+import katex from 'katex';
 import { escapeHtml } from 'markdown-it/lib/common/utils';
 import { css, customElement, property, PropertyValues, UpdatingElement } from 'lit-element';
 import { resolve } from './config';
@@ -13,106 +13,66 @@ type DisplayMode = 'inline' | 'display';
  * 一种公式语言
  */
 type Language = {
-    copyDelimiters: Record<MathMode, [string, string]>;
     /**
      * 渲染公式
      */
-    render(this: MathElement, source: string, mode: MathMode): void | Promise<void>;
+    render(this: HTMLElement, source: string, mode: MathMode): void | Promise<void>;
 };
 
 /**
  * 注入样式
  */
-function style(el: HTMLElement): void {
+function style(el: HTMLElement, inElement: boolean): void {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.href = resolve('katex', '^0.12', 'dist/katex.css');
-    const style = document.createElement('style');
-    style.textContent = css`
-        cwe-math {
-            display: inline;
-            user-select: all;
-        }
-        cwe-math[mode='display'] {
-            display: inline-block;
-            overflow: auto;
-            margin: 0.8em 0;
-        }
-    `.cssText;
     el.appendChild(link);
-    el.appendChild(style);
+    if (inElement) {
+        const style = document.createElement('style');
+        style.textContent = css`
+            :host {
+                display: inline;
+                user-select: all;
+                --error-color: red;
+            }
+            :host([mode='display']) {
+                display: block;
+                overflow: auto;
+                margin: 0.8em 0;
+            }
+            #styles {
+                display: none;
+            }
+            #content {
+                display: contents;
+            }
+            .error {
+                color: var(--error-color);
+            }
+        `.cssText;
+        el.appendChild(style);
+    }
 }
 
 const languages: Record<string, Language | { aliasOf: string }> = {
     tex: {
-        copyDelimiters: {
-            inline: ['$', '$'],
-            display: ['$$ ', ' $$'],
-        },
         render(source: string, mode: 'display' | 'inline'): void {
             katex.render(source, this, {
                 displayMode: mode === 'display',
             });
-            style(this);
         },
     },
     latex: { aliasOf: 'tex' },
     katex: { aliasOf: 'tex' },
     // asciimath: {
-    //     copyDelimiters: {
-    //         inline: ['\\(', '\\)'],
-    //         display: ['\\[ ', ' \\]'],
-    //     },
     //     render(source: string, mode: 'display' | 'inline'): void | Promise<void> {
     //         const tex = asciimathToLatex(source);
     //         return (languages.tex as Language).render.call(this, tex, mode);
     //     },
     // },
 };
 
-/**
- * 将 cwe-math 中的内容替换为源
- */
-function replaceMathText(fragment: DocumentFragment): void {
-    const math = fragment.querySelectorAll<MathElement>(`cwe-math[language]`);
-    math.forEach((el) => {
-        const source = el.srcdoc ?? '';
-        if (!source) return;
-        const lang = el.language;
-        const mode = el.mode;
-        if (!lang || !(lang in languages)) {
-            return;
-        }
-        const d = (languages[lang] as Language).copyDelimiters[mode];
-        el.textContent = `${d[0]}${source}${d[1]}`;
-    });
-}
-
-/**复制 */
-function onCopy(event: HTMLElementEventMap['copy']): void {
-    const selection = window.getSelection();
-    if (!selection || selection.isCollapsed || !event.clipboardData) {
-        return;
-    }
-    const fragment = selection.getRangeAt(0).cloneContents();
-    if (!fragment.querySelector('cwe-math')) {
-        return;
-    }
-    // Preserve usual HTML copy/paste behavior.
-    const html: string[] = [];
-    fragment.childNodes.forEach((node) => {
-        html.push((node as Element).outerHTML);
-    });
-    event.clipboardData.setData('text/html', html.join(''));
-    replaceMathText(fragment);
-    // Rewrite plain-text version.
-    event.clipboardData.setData('text/plain', fragment.textContent ?? '');
-    // Prevent normal copy handling.
-    event.preventDefault();
-}
-
-document.addEventListener('copy', onCopy);
-style(document.head);
+style(document.head, false);
 
 /**
  * 公式模式
@@ -124,6 +84,21 @@ type MathMode = 'inline' | 'display';
  */
 @customElement('cwe-math')
 export class MathElement extends UpdatingElement {
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.elStyles = document.createElement('div');
+        this.elStyles.id = 'styles';
+        this.elContent = document.createElement('div');
+        this.elContent.id = 'content';
+        root.append(this.elStyles, this.elContent);
+        style(this.elStyles, true);
+    }
+
+    /** 样式 */
+    private readonly elStyles: HTMLElement;
+    /** 渲染结果 */
+    private readonly elContent: HTMLElementTagNameMap['article'];
     /** 语言 */
     @property({
         reflect: true,
@@ -166,13 +141,15 @@ export class MathElement extends UpdatingElement {
         const source = this.srcdoc?.trim() ?? '';
 
         if (!langDef || langDef.render == null) {
-            this.innerHTML = `<span class="error">Unsupported language ${lang ?? ''}</span>`;
+            this.elContent.innerHTML = `<span class="error">Unsupported language ${lang ?? ''}</span>`;
             return;
         }
         try {
-            await langDef.render.call(this, source, this.mode);
+            await langDef.render.call(this.elContent, source, this.mode);
         } catch (ex) {
-            this.innerHTML = `<span class="error" title="${escapeHtml(String(ex))}">${escapeHtml(source)}</span>`;
+            this.elContent.innerHTML = `<span class="error" title="${escapeHtml(String(ex))}">${escapeHtml(
+                source,
+            )}</span>`;
         }
     }
 }

src/math.ts

@@ -2,9 +2,9 @@ import { Subscription, merge } from 'rxjs';
 import { tap, share, map, distinctUntilChanged } from 'rxjs/operators';
 import { resizing } from './private/utils';
 import mermaid from 'mermaid';
+import type mermaidAPI from 'mermaid/mermaidAPI';
 import { customElement, property, PropertyValues, UpdatingElement } from 'lit-element';
 import { theme } from './config';
-import mermaidAPI from 'mermaid/mermaidAPI';
 
 let t: mermaidAPI.Theme = 'default';
 

src/mermaid.ts

@@ -3,7 +3,7 @@
 
 'use strict';
 
-var parseImageSize = require('./helpers/parse_image_size');
+import parseImageSize from './parse_image_size';
 
 function image_with_size(md) {
     return function (state, silent) {
@@ -217,6 +217,6 @@ function image_with_size(md) {
     };
 }
 
-module.exports = function imsize_plugin(md, options) {
+export default function imsize_plugin(md, options) {
     md.inline.ruler.before('emphasis', 'image', image_with_size(md, options));
-};
+}

src/private/markdown/imsize/helpers/normalize_reference.js

@@ -24,7 +24,7 @@ function parseNextNumber(str, pos, max) {
     return result;
 }
 
-module.exports = function parseImageSize(str, pos, max) {
+export default function parseImageSize(str, pos, max) {
     var code,
         result = {
             ok: false,
@@ -75,4 +75,4 @@ module.exports = function parseImageSize(str, pos, max) {
     result.pos = pos;
     result.ok = true;
     return result;
-};
+}