Skip to content

Commit

Permalink
feat: add solid integration (#26)
Browse files Browse the repository at this point in the history
Co-authored-by: Corbin Crutchley <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>
  • Loading branch information
3 people authored Oct 12, 2024
1 parent fd3bd4b commit 76b464d
Show file tree
Hide file tree
Showing 15 changed files with 1,459 additions and 92 deletions.
28 changes: 28 additions & 0 deletions build.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import type { Plugin } from 'rollup'
import fs from 'node:fs/promises'
import babel from '@rollup/plugin-babel'
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
Expand All @@ -8,6 +10,7 @@ export default defineBuildConfig({
'src/react',
'src/core',
'src/types',
'src/solid',
'src/renderer',
{
builder: 'mkdist',
Expand All @@ -27,8 +30,33 @@ export default defineBuildConfig({
clean: true,
rollup: {
inlineDependencies: true,
// Disable esbuild in favor of Babel for SolidJS support
esbuild: false,
},
hooks: {
'rollup:options': async (config, options) => {
options.plugins ||= []
const plugins = options.plugins as Plugin[]
plugins.unshift(babel({
babelHelpers: 'bundled',
include: ['src/**'],
exclude: ['src/solid/**', 'src/react/**'],
presets: ['@babel/preset-typescript'],
extensions: ['.ts', '.js'],
}))
plugins.unshift(babel({
babelHelpers: 'bundled',
include: ['src/solid/**'],
presets: ['@babel/preset-typescript', 'solid'],
extensions: ['.ts', '.tsx', '.js', '.jsx'],
}))
plugins.unshift(babel({
babelHelpers: 'bundled',
include: ['src/react/**'],
presets: ['@babel/preset-typescript', '@babel/preset-react'],
extensions: ['.ts', '.tsx', '.js', '.jsx'],
}))
},
'mkdist:done': async () => {
await fs.writeFile('dist/svelte.mjs', 'export * from "./svelte/index.mjs"\n', 'utf-8')
await fs.writeFile('dist/svelte.d.ts', 'export * from "./svelte/index.mjs"\n', 'utf-8')
Expand Down
17 changes: 17 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@
"./react": {
"import": "./dist/react.mjs"
},
"./solid": {
"import": "./dist/solid.mjs"
},
"./svelte": {
"import": "./dist/svelte.mjs"
},
Expand All @@ -57,6 +60,9 @@
"./svelte": [
"./dist/svelte.d.ts"
],
"./solid": [
"./dist/solid.d.ts"
],
"./core": [
"./dist/core.d.ts"
],
Expand Down Expand Up @@ -85,6 +91,7 @@
"peerDependencies": {
"react": "^18.2.0",
"shiki": "^1.1.6",
"solid-js": "^1.9.1",
"svelte": "5.0.0-next.107",
"vue": "^3.4.0"
},
Expand All @@ -95,6 +102,9 @@
"shiki": {
"optional": true
},
"solid-js": {
"optional": true
},
"svelte": {
"optional": true
},
Expand All @@ -110,27 +120,34 @@
"@antfu/eslint-config": "^3.7.3",
"@antfu/ni": "^0.23.0",
"@antfu/utils": "^0.7.10",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@eslint-react/eslint-plugin": "^1.14.3",
"@rollup/plugin-babel": "^6.0.4",
"@sveltejs/vite-plugin-svelte": "^3.1.2",
"@types/diff-match-patch": "^1.0.36",
"@types/node": "^22.7.4",
"@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0",
"@unocss/reset": "^0.63.2",
"@vueuse/core": "^11.1.0",
"babel-preset-solid": "^1.9.0",
"bumpp": "^9.6.1",
"eslint": "^9.11.1",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.12",
"eslint-plugin-solid": "^0.14.3",
"eslint-plugin-svelte": "^2.44.1",
"esno": "^4.8.0",
"lint-staged": "^15.2.10",
"pnpm": "^9.11.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rimraf": "^6.0.1",
"rollup": "^4.24.0",
"shiki": "^1.21.0",
"simple-git-hooks": "^2.11.1",
"solid-js": "^1.9.1",
"svelte": "5.0.0-next.107",
"typescript": "^5.6.2",
"unbuild": "^2.0.0",
Expand Down
2 changes: 2 additions & 0 deletions playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
"vue": "^3.5.10"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.2",
"@vitejs/plugin-vue": "^5.1.4",
"typescript": "^5.6.2",
"vite": "^5.4.8",
"vite-plugin-solid": "^2.10.2",
"vue-tsc": "^2.1.6"
}
}
7 changes: 7 additions & 0 deletions playground/src/Playground.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { bundledThemesInfo } from 'shiki/themes'
import { ref, shallowRef, watch } from 'vue'
import { vueAfter, vueBefore } from './fixture'
import { createRendererReact } from './renderer/react'
import { createRendererSolid } from './renderer/solid'
import { createRendererSvelte } from './renderer/svelte.svelte'
import { createRendererVue } from './renderer/vue'
Expand Down Expand Up @@ -101,6 +102,9 @@ function rendererUpdate() {
case 'react':
renderer = createRendererReact(rendererOptions)
break
case 'solid':
renderer = createRendererSolid(rendererOptions)
break
case 'svelte':
renderer = createRendererSvelte(rendererOptions)
break
Expand Down Expand Up @@ -314,6 +318,9 @@ watch(
<option value="react">
React Renderer
</option>
<option value="solid">
Solid Renderer
</option>
<option value="svelte">
Svelte Renderer
</option>
Expand Down
65 changes: 65 additions & 0 deletions playground/src/renderer/solid.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/** @jsxImportSource solid-js */

import type { RendererFactory, RendererFactoryResult } from './types'
import { createEffect, createSignal } from 'solid-js'
import { render } from 'solid-js/web'
import { shallowReactive, watch } from 'vue'
import { ShikiMagicMove } from '../../../src/solid'

export const createRendererSolid: RendererFactory = (options): RendererFactoryResult => {
const props = shallowReactive<any>({
onStart: options.onStart,
onEnd: options.onEnd,
})

function App() {
const [code, setCode] = createSignal(props.code as string)
const [highlighter, setHighlighter] = createSignal(props.highlighter)
const [lang, setLang] = createSignal(props.lang)
const [theme, setTheme] = createSignal(props.theme)
const [className, setClassName] = createSignal(props.class)

createEffect(() => {
watch(props, () => {
// Force Solid to re-render
setCode(props.code)
setHighlighter(props.highlighter)
setLang(props.lang)
setTheme(props.theme)
setClassName(props.class)
})
})

return (
<>
<ShikiMagicMove
highlighter={highlighter()}
code={code()}
class={className()}
lang={lang()}
theme={theme()}
options={props.options}
/>
</>
)
}

let dispose = () => {}

return {
mount: (element, payload) => {
Object.assign(props, payload)
dispose = render(
() => <App />,
element,
)
},

update: (payload) => {
Object.assign(props, payload)
},
dispose: () => {
dispose?.()
},
}
}
2 changes: 1 addition & 1 deletion playground/src/renderer/types.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { HighlighterCore } from 'shiki/core'
import type { MagicMoveDifferOptions, MagicMoveRenderOptions } from '../../../src/core'

export type RendererType = 'vue' | 'react' | 'svelte'
export type RendererType = 'vue' | 'react' | 'svelte' | 'solid'

export interface RendererUpdatePayload {
highlighter: HighlighterCore
Expand Down
15 changes: 15 additions & 0 deletions playground/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"compilerOptions": {
"target": "ESNext",
"jsx": "preserve",
"lib": ["ESNext", "DOM"],
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"strict": true,
"strictNullChecks": true,
"esModuleInterop": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true
}
}
4 changes: 4 additions & 0 deletions playground/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { fileURLToPath } from 'node:url'
import { svelte as Svelte } from '@sveltejs/vite-plugin-svelte'
import React from '@vitejs/plugin-react'
import Vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import Solid from 'vite-plugin-solid'

export default defineConfig({
resolve: {
Expand All @@ -15,5 +17,7 @@ export default defineConfig({
Vue(),
UnoCSS(),
Svelte(),
Solid({ include: ['src/renderer/solid.tsx', '../src/solid/**'] }),
React({ include: ['src/renderer/react.tsx', '../src/react/**'] }),
],
})
Loading

0 comments on commit 76b464d

Please sign in to comment.