feat: convert source code to TypeScript (#209)

* chore(deps-dev): add svelte-preprocess * build: set up typescript * feat: convert source code to TypeScript * build: include src files in tsconfig.json
metonym · Jun 9, 2022 · 63a4e31 · 63a4e31
1 parent 236e9f8
commit 63a4e31
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -35,9 +35,10 @@
  "svelte": "^3.48.0",
  "svelte-check": "^2.7.1",
  "svelte-focus-key": "^0.3.2",
+ "svelte-preprocess": "^4.10.7",
  "svelte2tsx": "^0.5.10",
  "totalist": "^3.0.0",
- "typescript": "^4.7.2",
+ "typescript": "^4.7.3",
  "vitest": "^0.13.1"
  },
  "repository": {

diff --git a/src/Highlight.svelte b/src/Highlight.svelte
@@ -1,26 +1,61 @@
-<script>
- /** @type {{ name?: string; register: (hljs: any) => Record<string, any>; }} */
- export let language = { name: undefined, register: undefined };
-
- /**
- * Source code to highlight
- * @type {string}
- */
+<script context="module" lang="ts">
+ import type { LanguageFn } from "highlight.js";
+
+ export type HighlightedCode = undefined | string;
+
+ export interface Language {
+ name?: string;
+ register: LanguageFn;
+ }
+
+ export interface Events {
+ highlight: {
+ highlighted?: HighlightedCode;
+ };
+ }
+</script>
+
+<script lang="ts">
+ interface $$Props extends Partial<HTMLPreElement> {
+ /**
+ * Specify the source code to highlight.
+ */
+ code?: any;
+
+ /**
+ * Provide the language to highlight the code.
+ * Import languages from `svelte-highlight/languages/*`.
+ */
+ language?: Language;
+
+ /**
+ * Set to `true` for the language name to be
+ * displayed at the top right of the code block.
+ */
+ langtag?: boolean;
+ }
+
+ interface $$Slots {
+ default: {
+ highlighted: HighlightedCode;
+ };
+ }
+
+ export let language: Language = {
+ name: undefined,
+ register: undefined,
+ };
+
  export let code = undefined;
 
- /**
- * Add a language tag to the top-right
- * of the code block
- * @type {boolean}
- */
  export let langtag = false;
 
  import hljs from "highlight.js/lib/core";
  import { createEventDispatcher, afterUpdate } from "svelte";
 
- const dispatch = createEventDispatcher();
+ const dispatch = createEventDispatcher<Events>();
 
- let highlighted = undefined;
+ let highlighted: HighlightedCode = undefined;
 
  afterUpdate(() => {
  if (highlighted) dispatch("highlight", { highlighted });

diff --git a/src/HighlightAuto.svelte b/src/HighlightAuto.svelte
@@ -1,23 +1,43 @@
-<script>
- /**
- * Source code to highlight
- * @type {string}
- */
+<script context="module" lang="ts">
+ import type { HighlightedCode, Language, Events } from "./Highlight.svelte";
+</script>
+
+<script lang="ts">
+ interface $$Props extends Partial<HTMLPreElement> {
+ /**
+ * Specify the source code to highlight.
+ */
+ code?: any;
+
+ /**
+ * Provide the language to highlight the code.
+ * Import languages from `svelte-highlight/languages/*`.
+ */
+ language?: Language;
+
+ /**
+ * Set to `true` for the language name to be
+ * displayed at the top right of the code block.
+ */
+ langtag?: boolean;
+ }
+
+ interface $$Slots {
+ default: {
+ highlighted: HighlightedCode;
+ };
+ }
+
  export let code = undefined;
 
- /**
- * Add a language tag to the top-right
- * of the code block
- * @type {boolean}
- */
  export let langtag = false;
 
  import hljs from "highlight.js";
  import { createEventDispatcher, afterUpdate } from "svelte";
 
- const dispatch = createEventDispatcher();
+ const dispatch = createEventDispatcher<Events>();
 
- let highlighted = undefined;
+ let highlighted: HighlightedCode = undefined;
  let language = undefined;
 
  afterUpdate(() => {

diff --git a/src/HighlightSvelte.svelte b/src/HighlightSvelte.svelte
@@ -1,15 +1,29 @@
-<script>
- /**
- * Source code to highlight
- * @type {string}
- */
+<script context="module" lang="ts">
+ import type { HighlightedCode, Language, Events } from "./Highlight.svelte";
+</script>
+
+<script lang="ts">
+ interface $$Props extends Partial<HTMLPreElement> {
+ /**
+ * Specify the source code to highlight.
+ */
+ code?: any;
+
+ /**
+ * Set to `true` for the language name to be
+ * displayed at the top right of the code block.
+ */
+ langtag?: boolean;
+ }
+
+ interface $$Slots {
+ default: {
+ highlighted: HighlightedCode;
+ };
+ }
+
  export let code = undefined;
 
- /**
- * Add a language tag to the top-right
- * of the code block
- * @type {boolean}
- */
  export let langtag = false;
 
  import hljs from "highlight.js/lib/core";
@@ -18,7 +32,7 @@
  import css from "highlight.js/lib/languages/css";
  import { createEventDispatcher, afterUpdate } from "svelte";
 
- const dispatch = createEventDispatcher();
+ const dispatch = createEventDispatcher<Events>();
 
  hljs.registerLanguage("xml", xml);
  hljs.registerLanguage("javascript", javascript);

diff --git a/src/index.js → src/index.ts b/src/index.js → src/index.ts
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,5 +1,6 @@
 import adapter from "@sveltejs/adapter-static";
 import fs from "fs";
+import preprocess from "svelte-preprocess"
 import { optimizeImports } from "carbon-preprocess-svelte";
 
 const pkg = JSON.parse(
@@ -16,6 +17,7 @@ const CONTENT = {
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
  preprocess: [
+ preprocess(),
  optimizeImports(),
  {
  script: ({ content }) => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,4 +1,10 @@
 {
  "extends": "./.svelte-kit/tsconfig.json",
- "include": ["demo/**/*.js", "demo/**/*.svelte", "tests/*.svelte"]
+ "include": [
+ "src/**/*.svelte",
+ "src/**/*.ts",
+ "demo/**/*.js",
+ "demo/**/*.svelte",
+ "tests/*.svelte"
+ ]
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1378,6 +1378,18 @@ svelte-preprocess@^4.10.5:
  sorcery "^0.10.0"
  strip-indent "^3.0.0"
 
+svelte-preprocess@^4.10.7:
+ version "4.10.7"
+ resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz#3626de472f51ffe20c9bc71eff5a3da66797c362"
+ integrity sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==
+ dependencies:
+ "@types/pug" "^2.0.4"
+ "@types/sass" "^1.16.0"
+ detect-indent "^6.0.0"
+ magic-string "^0.25.7"
+ sorcery "^0.10.0"
+ strip-indent "^3.0.0"
+
 svelte2tsx@^0.5.10:
  version "0.5.10"
  resolved "https://registry.yarnpkg.com/svelte2tsx/-/svelte2tsx-0.5.10.tgz#32f244534361325e40f8976173ce2569c7e71fdb"
@@ -1464,10 +1476,10 @@ typescript@*, typescript@^4.6.3:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c"
  integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==
 
-typescript@^4.7.2:
- version "4.7.2"
- resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.2.tgz#1f9aa2ceb9af87cca227813b4310fff0b51593c4"
- integrity sha512-Mamb1iX2FDUpcTRzltPxgWMKy3fhg0TN378ylbktPGPK/99KbDtMQ4W1hwgsbPAsG3a0xKa1vmw4VKZQbkvz5A==
+typescript@^4.7.3:
+ version "4.7.3"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+ integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
 
 universalify@^0.1.2:
  version "0.1.2"