fix(types): generate types for svelte-highlight/languages/* and svelte-highlight/styles/* (#231)

* fix(types): generate types for languages, styles

* test: assert language/style types copied to package

* build: ensure "build:lib" script is run before package

Author: metonym

package.json

@@ -12,7 +12,7 @@
     "dev": "vite dev",
     "build": "vite build",
     "build:lib": "node scripts",
-    "package": "svelte-kit package",
+    "package": "yarn build:lib && svelte-kit package",
     "check": "svelte-check --workspace tests",
     "test": "vitest",
     "format": "prettier --ignore-path .gitignore --write ."

scripts/build-languages.js

@@ -9,10 +9,14 @@ export async function buildLanguages() {
 
   let languages = hljs.listLanguages();
   let markdown = createMarkdown("Languages", languages.length);
-  let types = `interface HljsLanguage {
-    register: (hljs: any) => Record<string, any>;
-  }\n\n`;
   let base = "";
+  let baseTs = `
+  import type { LanguageFn } from "highlight.js";
+  
+  interface LanguageType<TName extends string> {
+    name?: TName;
+    register: LanguageFn;
+  }\n\n`;
 
   /** @type {import("./build-styles").ModuleNames} */
   let lang = [];
@@ -23,8 +27,8 @@ export async function buildLanguages() {
     if (/^[0-9]/.test(name)) moduleName = `_${name}`;
     if (/-/.test(name)) moduleName = toCamelCase(name);
 
-    types += `export const ${moduleName}: HljsLanguage & { name: "${name}"; };\n\n`;
     base += `export { default as ${moduleName} } from './${name}';\n`;
+    baseTs += `export const ${moduleName}: LanguageType<"${name}">;\n`;
     lang.push({ name, moduleName });
     markdown += `## ${name} (\`${moduleName}\`)
 
@@ -43,9 +47,16 @@ export async function buildLanguages() {
 export const ${moduleName} = { name: "${name}", register };
 export default ${moduleName};\n`
     );
+
+    await writeTo(
+      `src/languages/${name}.d.ts`,
+      `export { ${moduleName} } from "./";
+export { ${moduleName} as default } from "./";\n`
+    );
   });
 
   await writeTo("src/languages/index.js", base);
+  await writeTo("src/languages/index.d.ts", baseTs);
   await writeTo("SUPPORTED_LANGUAGES.md", markdown);
   await writeTo("demo/lib/languages.json", lang);
 }

scripts/build-styles.js

@@ -44,6 +44,10 @@ export async function buildStyles() {
       export default ${moduleName};\n`;
 
       await writeTo(`src/styles/${name}.js`, exportee);
+      await writeTo(
+        `src/styles/${name}.d.ts`,
+        `export { ${moduleName} as default } from "./";\n`
+      );
       await writeTo(`src/styles/${name}.css`, content);
     } else {
       await copyFile(absPath, `src/styles/${file}`);
@@ -95,6 +99,7 @@ export async function buildStyles() {
     .join("");
 
   await writeTo("src/styles/index.js", base);
+  await writeTo("src/styles/index.d.ts", types);
   await writeTo("SUPPORTED_STYLES.md", markdown);
   await writeTo("demo/lib/styles.json", styles);
 }

tests/SvelteHighlightPackage.test.svelte

@@ -2,14 +2,17 @@
   import Highlight from "../package";
   import Highlight2 from "../package/Highlight.svelte";
   import { typescript } from "../package/languages";
+  import typescriptDefault from "../package/languages/typescript";
+  import { typescript as ts } from "../package/languages/typescript";
   import javascript from "../package/languages/javascript";
   import { github, purebasic, _3024 } from "../package/styles/index";
+  import githubStyles from "../package/styles/github";
   import "../package/styles/3024.css";
 </script>
 
 <Highlight
   code=""
-  language={javascript || typescript}
+  language={javascript || typescript || typescriptDefault || ts}
   on:highlight={(e) => {
     console.log(e.detail);
   }}
@@ -21,4 +24,5 @@
 <svelte:component this={Highlight2} />
 
 {github}
+{githubStyles}
 {purebasic}