@hyvor/design 0.0.4 → 0.0.6

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -1,28 +1,11 @@
 <script>import "./prism.scss";
 export let code;
 export let language = "html";
-import Prism from "prismjs";
-import "prism-svelte";
-function getCode() {
-  let ret = code;
-  ret = ret.replace(/^[^\S\r\n]*\n/, "");
-  ret = ret.replace(/\n[^\S\r\n]*$/, "");
-  let lines = ret.split("\n");
-  let indent = null;
-  lines = lines.map((line) => {
-    if (indent === null) {
-      const match = line.match(/^(\s*)/);
-      indent = match ? match[1].length : 0;
-    }
-    if (line.substring(0, indent).trim() !== "") {
-      return line;
-    }
-    line = line.substring(indent);
-    return line;
-  });
-  ret = lines.join("\n");
-  return Prism.highlight(ret, Prism.languages[language], language);
-}
+const languagesMap = {
+  svelte: "tsx"
+};
+const languageCode = languagesMap[language] || language;
+import getCode, {} from "./prism.js";
 </script>
 
-<pre class="language-{language}"><code>{@html getCode()}</code></pre>
+<pre class="language-{languageCode}"><code>{@html getCode(code, languageCode)}</code></pre>

package/dist/components/CodeBlock/CodeBlock.svelte.d.ts

@@ -1,10 +1,9 @@
 import { SvelteComponent } from "svelte";
 import './prism.scss';
-import 'prism-svelte';
 declare const __propDef: {
     props: {
         code: string;
-        language?: "html" | "js" | "css" | "svelte" | undefined;
+        language?: ("html" | "css" | "ts" | "jsx" | "svelte") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeBlock/prism.d.ts

@@ -0,0 +1,5 @@
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-tsx.js';
+export type Language = 'html' | 'css' | 'js' | 'ts' | 'jsx' | 'tsx';
+export default function getCode(code: string, language: Language): string;

package/dist/components/CodeBlock/prism.js

@@ -0,0 +1,28 @@
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-tsx.js';
+export default function getCode(code, language) {
+    let ret = code;
+    // remove the first empty line
+    ret = ret.replace(/^[^\S\r\n]*\n/, "");
+    // remove the last empty line
+    ret = ret.replace(/\n[^\S\r\n]*$/, "");
+    let lines = ret.split("\n");
+    let indent = null; // number of spaces to remove from each line
+    lines = lines.map(line => {
+        if (indent === null) {
+            // find the indent
+            const match = line.match(/^(\s*)/);
+            indent = match ? match[1].length : 0;
+        }
+        if (line.substring(0, indent).trim() !== "") {
+            return line;
+        }
+        // remove the indent
+        line = line.substring(indent);
+        return line;
+    });
+    ret = lines.join("\n");
+    return Prism.highlight(ret, Prism.languages[language], language);
+}

package/dist/components/CodeBlock/prism.scss

@@ -4,6 +4,9 @@ code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shad
 pre[data-line]{position:relative;padding:1em 0 1em 3em}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}@media print{.line-highlight{-webkit-print-color-adjust:exact;color-adjust:exact}}.line-highlight:before,.line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}.line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}.line-numbers .line-highlight:after,.line-numbers .line-highlight:before{content:none}pre[id].linkable-line-numbers span.line-numbers-rows{pointer-events:all}pre[id].linkable-line-numbers span.line-numbers-rows>span:before{cursor:pointer}pre[id].linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:rgba(128,128,128,.2)}
 pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
 
+/* to make jsx look the same as HTML */
+pre[class="language-tsx"] .token.class-name{color:#905}
+
 :root.dark {
     code[class*=language-],pre[class*=language-]{color:#d4d4d4;text-shadow:none;font-family:Menlo,Monaco,Consolas,"Andale Mono","Ubuntu Mono","Courier New",monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#264f78}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#262626}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#db4c69;background:#262626}.namespace{opacity:.7}.token.boolean,.token.doctype .token.doctype-tag,.token.entity,.token.important,.token.keyword,.token.operator.arrow,.token.punctuation.interpolation-punctuation,.token.tag{color:#569cd6}.token.atrule .token.url,.token.attr-name,.token.console,.token.constant,.token.doctype .token.name,.token.exports .token.maybe-class-name,.token.imports .token.maybe-class-name,.token.interpolation,.token.parameter,.token.property,.token.variable,code[class*=language-javascript],code[class*=language-jsx],code[class*=language-tsx],code[class*=language-typescript],pre[class*=language-javascript],pre[class*=language-jsx],pre[class*=language-tsx],pre[class*=language-typescript]{color:#9cdcfe}.token.comment,.token.prolog{color:#6a9955}.language-html .language-css .token.punctuation,.language-html .language-javascript .token.punctuation,.token.atrule .token.url .token.punctuation,.token.attr-value .token.punctuation.attr-equals,.token.entity,.token.operator,.token.punctuation,code[class*=language-html],pre[class*=language-html]{color:#d4d4d4}.token.boolean,.token.constant,.token.inserted,.token.number,.token.property,.token.symbol,.token.tag,.token.unit{color:#b5cea8}.token.atrule,.token.attr-name,.token.attr-value,.token.attr-value .token.punctuation,.token.builtin,.token.char,.token.deleted,.token.selector,.token.string,code[class*=language-css],pre[class*=language-css]{color:#ce9178}.language-css .token.string.url{text-decoration:underline}.token.atrule .token.rule,.token.keyword.control-flow,.token.keyword.module{color:#c586c0}.language-regex .token.anchor,.token.atrule .token.url .token.function,.token.function,.token.function .token.maybe-class-name{color:#dcdcaa}.token.regex{color:#d16969}.token.italic{font-style:italic}.token.class-name,.token.maybe-class-name,.token.namespace{color:#4ec9b0}.token.escape,.token.selector{color:#d7ba7d}.language-html .token.punctuation,.token.cdata,.token.tag .token.punctuation{color:grey}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight.line-highlight{background:#f7ebc6;box-shadow:inset 5px 0 0 #f7d87c;z-index:0}
 }

package/dist/index.css

@@ -13,6 +13,8 @@
 body {
     background-color: var(--background, var(--accent-lightest));
     color: var(--text);
+    margin: 0;
+    padding: 0;
 }
 
 button, a {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.4",
+	"version": "0.0.6",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
@@ -35,12 +35,12 @@
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.25.1",
 		"@sveltejs/package": "^2.0.0",
+		"@types/prismjs": "^1.26.1",
 		"prismjs": "^1.29.0",
 		"publint": "^0.1.9",
 		"sass": "^1.68.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
-		"svelvg": "^0.12.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
@@ -50,8 +50,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^0.0.2",
-		"prism-svelte": "^0.5.0"
+		"@hyvor/icons": "^0.0.2"
 	},
 	"publishConfig": {
 		"access": "public"