fix

Author: nakasyou

examples/simple/src/main.ts

@@ -1,35 +1,33 @@
-import { Project, type CostumeData } from 'hikkaku'
+import { Project } from 'hikkaku'
 import {
-  nextBackdrop,
-  switchBackdropTo,
+  forever,
+  ifElse,
+  ifThen,
+  say,
+  wait,
   whenFlagClicked,
-  whenKeyPressed,
 } from 'hikkaku/blocks'
 
 const project = new Project()
 
-const slideModules = import.meta.glob('../../../../slide/assets/mock/*.png', {
-  eager: true,
-  import: 'default',
-  query: '?scratch',
-}) as Record<string, CostumeData>
-
-const slides = Object.entries(slideModules)
-  .sort(([a], [b]) => a.localeCompare(b, undefined, { numeric: true }))
-  .map(([path, image]) =>
-    project.stage.addCostume({
-      ...image,
-      name: path.match(/([^/]+)\.png$/)?.[1] ?? image.name,
-    }),
-  )
-
 project.stage.run(() => {
   whenFlagClicked(() => {
-    switchBackdropTo(slides[0]?.name ?? '1')
-  })
-
-  whenKeyPressed('right arrow', () => {
-    nextBackdrop()
+    forever(() => {
+      say('Hello, Hikkaku!!aaa')
+      wait(1)
+      say('')
+      wait(1)
+      ifThen(true, () => {
+        say('This is an if block')
+      })
+      ifElse(
+        false,
+        () => {},
+        () => {
+          say('This is an else block')
+        },
+      )
+    })
   })
 })
 

packages/hikkaku/src/client/index.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 // find root DOM node
 
-import { zipSync } from 'fflate'
 import type * as sb3 from 'sb3-types'
 import { findDOMAppRoot, getScratchInternalStates } from './fiber'
 
@@ -20,46 +19,13 @@ globalThis.hk = {
 
 let isFirstLoad = true
 
-const collectAssetIds = (project: sb3.ScratchProject): string[] => {
-  const assetIds = new Set<string>()
-  for (const target of project.targets) {
-    for (const costume of target.costumes) {
-      assetIds.add(costume.md5ext ?? `${costume.assetId}.${costume.dataFormat}`)
-    }
-    for (const sound of target.sounds) {
-      assetIds.add(sound.md5ext ?? `${sound.assetId}.${sound.dataFormat}`)
-    }
-  }
-  return [...assetIds]
-}
-
-const loadProjectArchive = async (project: sb3.ScratchProject) => {
-  const files: Record<string, Uint8Array> = {
-    'project.json': new TextEncoder().encode(JSON.stringify(project)),
-  }
-
-  await Promise.all(
-    collectAssetIds(project).map(async (assetId) => {
-      const response = await fetch(`/hikkaku-assets/${assetId}`)
-      if (!response.ok) {
-        console.warn(`Failed to load Scratch asset: ${assetId}`)
-        return
-      }
-      files[assetId] = new Uint8Array(await response.arrayBuffer())
-    }),
-  )
-
-  return zipSync(files)
-}
-
 import.meta.hot?.on('hikkaku:project', async (project: sb3.ScratchProject) => {
   if (isFirstLoad) {
     await new Promise((resolve) => setTimeout(resolve, 500))
     isFirstLoad = false
   }
   console.log('Received updated project:', project)
-  const projectSB3 = await loadProjectArchive(project)
-  await state.vm.loadProject(projectSB3).catch(console.error)
+  await state.vm.loadProject(project).catch(console.error)
   console.log('Project loaded.')
 
   //state.scratchBlocks.getMainWorkspace().cleanUp()

packages/hikkaku/src/vite/index.ts

@@ -27,6 +27,15 @@ export default function hikkaku(init: HikkakuViteInit): PluginOption {
   let additionalAssets = new Map<string, Uint8Array>()
   const assetCache = new Map<string, Uint8Array | false>()
 
+  const loadProjectFromRunner = async (): Promise<Project> => {
+    if (!runner) {
+      throw new Error('Module runner is not initialized.')
+    }
+    const project: Project = (await runner.import(init.entry)).default
+    additionalAssets = project.getAdditionalAssets()
+    return project
+  }
+
   // Helper function to set Content-Type based on file extension
   const setContentType = (res: ServerResponse, assetId: string) => {
     const assetExt = path.extname(assetId).toLowerCase()
@@ -175,10 +184,7 @@ export default function hikkaku(init: HikkakuViteInit): PluginOption {
         if (id === VIRTUAL_MODULE_IDS.project) {
           if (this.environment.mode === 'dev') {
             // in dev mode, use entry file
-            if (!runner) {
-              throw new Error('Module runner is not initialized.')
-            }
-            const project: Project = (await runner.import(init.entry)).default
+            const project = await loadProjectFromRunner()
 
             return `
             export default ${JSON.stringify(project.toScratch())}
@@ -204,11 +210,7 @@ export default function hikkaku(init: HikkakuViteInit): PluginOption {
       },
       async hotUpdate(options) {
         if (this.environment.name !== 'hikkaku') return
-        if (!runner) {
-          throw new Error('Module runner is not initialized.')
-        }
-        const project: Project = (await runner.import(init.entry)).default
-        additionalAssets = project.getAdditionalAssets()
+        const project = await loadProjectFromRunner()
         options.server.environments.client.hot.send(
           'hikkaku:project',
           project.toScratch(),
@@ -223,11 +225,7 @@ export default function hikkaku(init: HikkakuViteInit): PluginOption {
         //server.watcher.add(init.entry)
         runner = createServerModuleRunner(hikkakuEnv)
         server.environments.client.hot.on('vite:client:connect', async () => {
-          if (!runner) {
-            throw new Error('Module runner is not initialized.')
-          }
-          const project: Project = (await runner.import(init.entry)).default
-          additionalAssets = project.getAdditionalAssets()
+          const project = await loadProjectFromRunner()
           server.environments.client.hot.send(
             'hikkaku:project',
             project.toScratch(),
@@ -244,7 +242,11 @@ export default function hikkaku(init: HikkakuViteInit): PluginOption {
               res.end('Asset ID is required')
               return
             }
-            const assetData = additionalAssets.get(assetId)
+            let assetData = additionalAssets.get(assetId)
+            if (!assetData && runner) {
+              await loadProjectFromRunner()
+              assetData = additionalAssets.get(assetId)
+            }
             if (!assetData) {
               // fallback to network fetch
               if (assetCache.has(assetId)) {