refactor(tooling): [MOD-PLUGIN-01] generate typed plugins with safe output handling

scripts/plugin/template/src/assets.d.ts.tpl

@@ -0,0 +1,4 @@
+declare module '*.less?inline' {
+  const css: string
+  export default css
+}

scripts/plugin/template/src/index.js

@@ -1,27 +0,0 @@
-import style from './style.less?inline';
-
-export default function {{export}}(option) {
-    return (art) => {
-        return {
-            name: '{{export}}',
-        };
-    };
-}
-
-if (typeof document !== 'undefined') {
-  const id = 'artplayer-plugin-{{name}}';
-  let $style = document.getElementById(id)
-  if (!$style) {
-    $style = document.createElement('style')
-    $style.id = id
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => {
-        document.head.appendChild($style)
-      })
-    }
-    else {
-      (document.head || document.documentElement).appendChild($style)
-    }
-  }
-  $style.textContent = style
-}

scripts/plugin/template/src/index.ts.tpl

@@ -0,0 +1,9 @@
+import type Artplayer from 'artplayer'
+import type { Option, Result } from '../types/api.js'
+import './stylesheet'
+
+function {{export}}(_option: Option = {}) {
+  return (_art: Artplayer): Result => ({ name: '{{export}}' })
+}
+
+export default Object.assign({{export}}, { default: {{export}} })

scripts/plugin/template/src/style.less

@@ -1,3 +1,3 @@
 .artplayer-plugin-{{name}} {
-    //
+  //
 }

scripts/plugin/template/src/stylesheet.ts.tpl

@@ -0,0 +1,12 @@
+import css from './style.less?inline'
+
+// The stylesheet belongs to the module, not individual player instances.
+if (typeof document !== 'undefined') {
+  const id = 'artplayer-plugin-{{name}}'
+  if (!document.getElementById(id)) {
+    const style = document.createElement('style')
+    style.id = id
+    style.textContent = css
+    ;(document.head || document.documentElement).appendChild(style)
+  }
+}