feat: <code>

Author: sheepbox8646

packages/layout/package.json

@@ -13,8 +13,8 @@
   "keywords": [],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./src/index.ts"
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
     }
   },
   "main": "./dist/index.mjs",

packages/layout/tsup.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "tsup";
+import { defineConfig } from 'tsup'
 
 export default defineConfig({
   entry: ['./src/index.ts'],

packages/model/package.json

@@ -13,8 +13,8 @@
   "keywords": [],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./src/index.ts"
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
     }
   },
   "main": "./dist/index.mjs",

packages/model/tsup.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from "tsup";
+import { defineConfig } from 'tsup'
 
 export default defineConfig({
   entry: ['./src/index.ts'],

packages/test/src/example.sciux

@@ -5,7 +5,9 @@
   <flexbox>{{ value }}</flexbox>
   <flexbox>{{ checked }}</flexbox>
   <rows>
-    <flexbox>1</flexbox>
+    <flexbox>
+      <code language="js">console.log('hello')</code>
+    </flexbox>
     <flexbox>1</flexbox>
     <flexbox>
       <input model="value"/>
@@ -20,8 +22,7 @@
   <block>2</block>
   <block>3</block>
   <block>4</block>
-  <block>5</block>
-  <block>6</block>
+  <canvas :width="100" :height="200"></canvas>
 </table>
 
 <!-- 测试垂直布局表格 -->

packages/test/src/main.ts

@@ -1,7 +1,7 @@
 import { align, block, columns, flexbox, grid, rows } from '@sciux/layout'
-import { table } from '@sciux/widget'
 import { button, checkbox, input, slider } from '@sciux/model'
-import { components, render } from 'sciux-laplace'
+import { canvas, code, link, table } from '@sciux/widget'
+import { components, render, TextMode, textModes } from 'sciux-laplace'
 import source from './example.sciux?raw'
 
 components.set('block', block)
@@ -13,7 +13,12 @@ components.set('align', align)
 components.set('button', button)
 components.set('input', input)
 components.set('table', table)
+components.set('code', code)
+components.set('canvas', canvas)
+components.set('link', link)
 components.set('checkbox', checkbox)
 components.set('slider', slider)
 
+textModes.set('code', TextMode.RCDATA)
+
 render(source, document.getElementById('app')!)

packages/test/tsconfig.json

@@ -1,24 +1,24 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
 
     /* Linting */
     "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
     "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
   "include": ["src"]

packages/widget/package.json

@@ -33,6 +33,7 @@
     "@sciux/layout": "workspace:^",
     "@vue/reactivity": "^3.5.14",
     "arktype": "^2.1.20",
-    "sciux-laplace": "latest"
+    "sciux-laplace": "latest",
+    "shiki": "^3.4.2"
   }
 }

packages/widget/src/code.ts

@@ -0,0 +1,34 @@
+/* eslint-disable antfu/no-top-level-await */
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { createHighlighter } from 'shiki'
+
+const highlighter = await createHighlighter({
+  themes: ['github-dark'],
+  langs: ['js', 'javascript', 'ts', 'typescript', 'python', 'java', 'c', 'cpp', 'c++', 'rust', 'html', 'css', 'sql'],
+})
+
+const T = type({
+  language: 'string',
+})
+
+export default defineComponent<'code', typeof T.infer>((attrs) => {
+  return {
+    name: 'code',
+    attrs: T,
+    setup(children) {
+      const container = document.createElement('div')
+      container.style.width = '100%'
+      container.style.height = '100%'
+      const kids = children()
+      // Filter out text nodes
+      const content = kids[0].textContent ?? ''
+      const html = highlighter.codeToHtml(content, {
+        lang: attrs.language.value,
+        theme: 'github-dark',
+      })
+      container.innerHTML = html
+      return container
+    },
+  }
+})

packages/widget/src/index.ts

@@ -1 +1,4 @@
+export { default as canvas } from './canvas'
+export { default as code } from './code'
+export { default as link } from './link'
 export { default as table } from './table'