Merge pull request #75 from cmgriffing/next

Voting Period Changes

.github/workflows/format.yml

@@ -21,6 +21,12 @@ jobs:
           # This is important to fetch the changes to the previous commit
           fetch-depth: 0
 
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
       - name: Prettier Action
         uses: creyD/[email protected]
         with:

.prettierrc

@@ -1,10 +1,22 @@
 {
-	"trailingComma": "all",
-	"tabWidth": 2,
-	"printWidth": 100,
-	"semi": false,
-	"singleQuote": true,
-	"useTabs": false,
-	"arrowParens": "avoid",
-	"bracketSpacing": true
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^solid-js(.*)$",
+    "^solid-(.*)$",
+    "^shiki(.*)$",
+    "^~/components/ui/(.*)$",
+    "^~/(.*)$",
+    "^[./]"
+  ],
+  "importOrderGroupNamespaceSpecifiers": true,
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "postinstall": "pnpm build",
     "dev": "pnpm run --filter ./playgrounds/app dev",
-    "build": "cd packages/shikicode && pnpm build && cd ../shiki-magic-move && pnpm build && cd ../../playgrounds/app && pnpm build",
+    "build": "cd packages/shikicode && pnpm build && cd ../shiki-magic-move && pnpm build",
     "test": "turbo run test --filter=./packages/*",
     "typecheck": "turbo run typecheck --filter=./packages/*",
     "build-test": "turbo run build test --filter=./packages/*",
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.26.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/node": "^18.11.18",
     "concurrently": "^7.6.0",
     "jsdom": "^21.0.0",

packages/shiki-magic-move/src/solid/ShikiMagicMove.tsx

@@ -19,31 +19,40 @@ export interface ShikiMagicMoveProps {
 }
 
 export function ShikiMagicMove(props: ShikiMagicMoveProps) {
-  const codeToTokens = (code: string, lineNumbers?: boolean) =>
-    codeToKeyedTokens(
-      props.highlighter,
-      code,
-      {
-        lang: props.lang,
-        theme: props.theme,
-      },
-      lineNumbers,
-    )
+  const codeToTokens = createMemo(() => {
+    return (code: string, lineNumbers?: boolean) =>
+      codeToKeyedTokens(
+        props.highlighter,
+        code,
+        {
+          lang: props.lang,
+          theme: props.theme,
+        },
+        lineNumbers,
+      )
+  })
 
-  const machine = createMagicMoveMachine((code, lineNumbers) => codeToTokens(code, lineNumbers))
+  const machine = createMemo(() => {
+    const newCodeToTokens = codeToTokens()
+    return createMagicMoveMachine((code, lineNumbers) => newCodeToTokens(code, lineNumbers))
+  })
 
   const result = createMemo(() => {
     const lineNumbers = props.options?.lineNumbers ?? false
     if (
-      props.code === machine.current.code &&
-      props.theme === machine.current.themeName &&
-      props.lang === machine.current.lang &&
-      lineNumbers === machine.current.lineNumbers
+      props.code === machine().current.code &&
+      props.theme === machine().current.themeName &&
+      props.lang === machine().current.lang &&
+      lineNumbers === machine().current.lineNumbers
     ) {
-      return machine
+      return machine()
+    }
+    try {
+      return machine().commit(props.code, props.options)
+      // eslint-disable-next-line unused-imports/no-unused-vars
+    } catch (e) {
+      return machine()
     }
-
-    return machine.commit(props.code, props.options)
   })
 
   return (

packages/shiki-magic-move/src/solid/ShikiMagicMoveRenderer.tsx

@@ -21,32 +21,38 @@ export interface ShikiMagicMoveRendererProps {
  * A wrapper component to `MagicMoveRenderer`
  */
 export function ShikiMagicMoveRenderer(props: ShikiMagicMoveRendererProps) {
-  let container: HTMLPreElement
-  let renderer: Renderer
+  // eslint-disable-next-line no-undef-init, prefer-const
+  let container: HTMLPreElement | undefined = undefined
+  // eslint-disable-next-line no-undef-init
+  let renderer: Renderer | undefined = undefined
   const [isMounted, setIsMounted] = createSignal(false)
 
   createEffect(() => {
-    if (!container) return
-    if (!isMounted()) {
+    if (container !== undefined && !isMounted()) {
       // Remove previous content
-      container.innerHTML = ''
+      ;(container as HTMLPreElement).innerHTML = ''
       setIsMounted(true)
       renderer = new Renderer(container)
     }
   })
 
   createEffect(() => {
     async function render() {
-      if (!renderer) return
+      if (!renderer) {
+        return
+      }
 
       Object.assign(renderer.options, props.options)
 
       if (props.animate === undefined || props.animate === true) {
-        if (props.previous) renderer.replace(props.previous)
+        if (props.previous) {
+          renderer.replace(props.previous)
+        }
 
         props.onStart?.()
         await renderer.render(props.tokens)
         props.onEnd?.()
+        // eslint-disable-next-line style/brace-style
       } else {
         renderer.replace(props.tokens)
       }
@@ -57,7 +63,6 @@ export function ShikiMagicMoveRenderer(props: ShikiMagicMoveRendererProps) {
 
   return (
     <pre
-      // @ts-expect-error - TS doesn't know that `container` is a ref
       ref={container}
       class={`shiki-magic-move-container ${props.class || ''}`.trim()}
       style={props.style}

playgrounds/app/app.config.ts

@@ -2,4 +2,7 @@ import { defineConfig } from '@solidjs/start/config'
 
 export default defineConfig({
   ssr: false,
+  vite: {
+    optimizeDeps: { exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'] },
+  },
 })

playgrounds/app/package.json

@@ -16,10 +16,14 @@
   },
   "dependencies": {
     "@corvu/resizable": "^0.2.3",
+    "@ffmpeg/core": "^0.12.6",
+    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/util": "^0.12.1",
     "@fontsource/bungee-inline": "^5.1.0",
     "@fontsource/roboto": "^5.1.0",
     "@kobalte/core": "^0.13.7",
     "@libsql/client": "^0.14.0",
+    "@solid-primitives/media": "^2.2.9",
     "@solid-primitives/storage": "^4.2.1",
     "@solidjs/meta": "^0.29.4",
     "@solidjs/router": "^0.14.7",
@@ -31,6 +35,7 @@
     "diff-match-patch-es": "^0.1.0",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.35.3",
+    "idb": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
     "modern-gif": "^2.0.3",
     "nanoid": "^5.0.7",
@@ -54,6 +59,7 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jsonwebtoken": "^9.0.7",
     "drizzle-kit": "^0.26.2",
     "tsx": "^4.19.1"

playgrounds/app/src/app.css

@@ -102,9 +102,7 @@
 
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      'rlig' 1,
-      'calt' 1;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
   }
 }
 
@@ -148,3 +146,27 @@
 #app {
   @apply min-h-screen flex flex-col;
 }
+
+.collapsible__content {
+  overflow: hidden;
+  animation: slideUp 300ms ease-out;
+}
+.collapsible__content[data-expanded] {
+  animation: slideDown 300ms ease-out;
+}
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

playgrounds/app/src/app.tsx

@@ -1,11 +1,14 @@
-import { Suspense } from 'solid-js'
+import '@fontsource/bungee-inline'
+import '@fontsource/roboto'
 import { Router } from '@solidjs/router'
 import { FileRoutes } from '@solidjs/start/router'
+
+import { Suspense } from 'solid-js'
+
 import { Toaster } from 'solid-sonner'
+
 import Header from '~/components/Header'
-import Footer from './components/Footer'
-import '@fontsource/bungee-inline'
-import '@fontsource/roboto'
+
 import './app.css'
 
 export default function App() {