hikkaku 0.1.0

package/src/blocks/sound.ts

@@ -0,0 +1,77 @@
+import { fromPrimitiveSource, fromSoundSource } from '../compiler/block-helper'
+import { block, valueBlock } from '../compiler/composer'
+import type { PrimitiveSource, SoundSource } from '../compiler/types'
+
+export type SoundEffect = 'pitch' | 'pan'
+
+export const playSound = (sound: SoundSource) => {
+  return block('sound_play', {
+    inputs: {
+      SOUND_MENU: fromSoundSource(sound),
+    },
+  })
+}
+
+export const playSoundUntilDone = (sound: SoundSource) => {
+  return block('sound_playuntildone', {
+    inputs: {
+      SOUND_MENU: fromSoundSource(sound),
+    },
+  })
+}
+
+export const stopAllSounds = () => {
+  return block('sound_stopallsounds', {})
+}
+
+export const setSoundEffectTo = (
+  effect: SoundEffect,
+  value: PrimitiveSource<number>,
+) => {
+  return block('sound_seteffectto', {
+    inputs: {
+      VALUE: fromPrimitiveSource(value),
+    },
+    fields: {
+      EFFECT: [effect, null],
+    },
+  })
+}
+
+export const changeSoundEffectBy = (
+  effect: SoundEffect,
+  value: PrimitiveSource<number>,
+) => {
+  return block('sound_changeeffectby', {
+    inputs: {
+      VALUE: fromPrimitiveSource(value),
+    },
+    fields: {
+      EFFECT: [effect, null],
+    },
+  })
+}
+
+export const clearEffects = () => {
+  return block('sound_cleareffects', {})
+}
+
+export const setVolumeTo = (value: PrimitiveSource<number>) => {
+  return block('sound_setvolumeto', {
+    inputs: {
+      VOLUME: fromPrimitiveSource(value),
+    },
+  })
+}
+
+export const changeVolumeBy = (value: PrimitiveSource<number>) => {
+  return block('sound_changevolumeby', {
+    inputs: {
+      VOLUME: fromPrimitiveSource(value),
+    },
+  })
+}
+
+export const getVolume = () => {
+  return valueBlock('sound_volume', {})
+}

package/src/client/fiber.ts

@@ -0,0 +1,110 @@
+import type { ScratchVM } from './types'
+
+export const findDOMAppRoot = () => {
+  const probably = [
+    document.getElementById('app'), // Scratch WWW: #app is the root element
+    document.querySelector('[class^=index_app]'), // Playground code of Scratch GUI
+  ]
+  for (const el of probably) {
+    if (el && '_reactRootContainer' in el) {
+      return el as ScratchRoot
+    }
+  }
+
+  throw new Error(
+    'Could not find root DOM node. Make sure you are running this in a Scratch environment.',
+  )
+}
+
+interface FiberNode {
+  child: ScratchAppFiberNode | FiberNode | null
+  sibling: ScratchAppFiberNode | FiberNode | null
+  type: string | null
+  elementType?: {
+    propTypes?: Record<string, unknown>
+  }
+}
+interface ScratchGUIReduxStoreType {
+  vm: ScratchVM
+}
+interface ScratchInternalReduxStoreType {
+  scratchGui: ScratchGUIReduxStoreType
+}
+interface ScratchAppFiberNode extends FiberNode {
+  memoizedProps: {
+    store: {
+      getState: () => ScratchInternalReduxStoreType
+    }
+  }
+}
+type ScratchRoot = {
+  _reactRootContainer: {
+    _internalRoot: {
+      current: FiberNode
+    }
+  }
+} & Element
+
+export function getSpecifiedFiber(
+  root: FiberNode,
+  cond: (fiber: FiberNode) => boolean,
+) {
+  const stack = [root]
+  while (true) {
+    const fiber = stack.pop()
+    if (!fiber) {
+      return null
+    }
+
+    if (cond(fiber)) {
+      return fiber
+    }
+    if (fiber.child) {
+      stack.push(fiber.child)
+    }
+    if (fiber.sibling) {
+      stack.push(fiber.sibling)
+    }
+  }
+}
+
+const getAppFiberNode = (root: FiberNode): ScratchAppFiberNode => {
+  let cur = root.child
+  while (cur) {
+    if ('memoizedProps' in cur && 'store' in cur.memoizedProps) {
+      return cur
+    }
+    cur = cur.child
+  }
+  throw new Error('Could not find app fiber node.')
+}
+export const getScratchInternalStates = (root: ScratchRoot) => {
+  const rootContainer = root._reactRootContainer
+  const rootFiberNode = rootContainer._internalRoot.current
+  const appFiberNode = getAppFiberNode(rootFiberNode)
+
+  const reduxState = appFiberNode.memoizedProps.store.getState()
+  const vm = reduxState.scratchGui.vm
+
+  const scratchBlocksFiber = getSpecifiedFiber(rootFiberNode, (fiber) => {
+    if (typeof fiber.type === 'function') {
+      const propTypes = fiber.elementType?.propTypes
+      if (propTypes && 'toolboxXML' in propTypes) {
+        return true
+      }
+    }
+    return false
+  })
+  // @ts-expect-error scratchBlocksFiber existence checked
+  const scratchBlocks = scratchBlocksFiber.stateNode.ScratchBlocks as {
+    getMainWorkspace: () => {
+      cleanUp: () => void
+    }
+  }
+
+  return {
+    reduxState,
+    vm,
+    scratchBlocks,
+  }
+}

package/src/client/index.ts

@@ -0,0 +1,26 @@
+/// <reference types="vite/client" />
+// find root DOM node
+
+import type * as sb3 from '@pnsk-lab/sb3-types'
+import { findDOMAppRoot, getScratchInternalStates } from './fiber'
+import type { getModeForResolutionAtIndex } from 'typescript'
+
+const root = findDOMAppRoot()
+const state = getScratchInternalStates(root)
+
+console.log('Scratch root element:', state)
+
+// @ts-expect-error helpers for devtools
+globalThis.hk = {
+  root,
+  vm: state.vm,
+  getModeForResolutionAtIndex: state.reduxState,
+  getJSON: () => state.vm.toJSON(),
+}
+
+import.meta.hot?.on('hikkaku:project', (project: sb3.ScratchProject) => {
+  state.vm.loadProject(project)
+  setTimeout(() => {
+    state.scratchBlocks.getMainWorkspace().cleanUp()
+  }, 1000)
+})

package/src/client/types.ts

@@ -0,0 +1,7 @@
+import type * as sb3 from '@pnsk-lab/sb3-types'
+
+export interface ScratchVM {
+  blockListener: () => void
+  loadProject: (project: sb3.ScratchProject | string) => Promise<void>
+  toJSON: () => sb3.ScratchProject
+}

package/src/compiler/block-helper.ts

@@ -0,0 +1,49 @@
+import type * as sb3 from '@pnsk-lab/sb3-types'
+import type {
+  CostumeSource,
+  PrimitiveAvailableOnScratch,
+  PrimitiveSource,
+  SoundSource,
+} from './types'
+
+export const fromPrimitiveSource = <T extends PrimitiveAvailableOnScratch>(
+  source: PrimitiveSource<T>,
+): sb3.Input => {
+  if (typeof source === 'number') {
+    return [1, [4, source]]
+  }
+  if (typeof source === 'boolean') {
+    return [1, [6, source ? 1 : 0]]
+  }
+  if (typeof source === 'string') {
+    return [1, [10, source]]
+  }
+
+  return [1, source.id]
+}
+
+export const fromCostumeSource = (source: CostumeSource): sb3.Input => {
+  if (
+    typeof source === 'object' &&
+    source !== null &&
+    'type' in source &&
+    source.type === 'costume'
+  ) {
+    return fromPrimitiveSource(source.name)
+  }
+
+  return fromPrimitiveSource(source as PrimitiveSource<string>)
+}
+
+export const fromSoundSource = (source: SoundSource): sb3.Input => {
+  if (
+    typeof source === 'object' &&
+    source !== null &&
+    'type' in source &&
+    source.type === 'sound'
+  ) {
+    return fromPrimitiveSource(source.name)
+  }
+
+  return fromPrimitiveSource(source as PrimitiveSource<string>)
+}

package/src/compiler/composer.ts

@@ -0,0 +1,177 @@
+import type * as sb3 from '@pnsk-lab/sb3-types'
+import type { HikkakuBlock } from './types'
+
+export type Handler = () => void
+
+let id = 0
+const nextId = () => (++id).toString(16)
+
+interface RootContext {
+  blocks: Record<string, sb3.Block>
+  adder?: (id: string, block: sb3.Block) => void
+  usedAsValueSet: WeakSet<sb3.Block>
+  valueBlockSet: WeakSet<sb3.Block>
+  blockToId: WeakMap<sb3.Block, string>
+}
+let rootContext: RootContext | null = null
+const getRootContext = () => {
+  if (!rootContext) {
+    throw new Error('Root context is not initialized. Call createBlocks first.')
+  }
+  return rootContext
+}
+
+export interface BlockInit {
+  inputs?: Record<string, sb3.Input>
+  fields?: Record<string, sb3.Fields>
+  topLevel?: boolean
+  mutation?: sb3.Mutation
+  isShadow?: boolean
+  isValue?: boolean
+}
+export const block = (opcode: string, init: BlockInit): HikkakuBlock => {
+  const ctx = getRootContext()
+  const id = nextId()
+  const block = {
+    opcode,
+    inputs: init.inputs ?? {},
+    fields: init.fields ?? {},
+    mutation: init.mutation,
+    shadow: init.isShadow ?? false,
+    topLevel: init.topLevel ?? false,
+    x: 0,
+    y: 0,
+    next: null,
+    parent: null,
+  }
+  ctx.blocks[id] = block
+  ctx.blockToId.set(block, id)
+  if (init.isValue) {
+    ctx.valueBlockSet.add(block)
+  }
+
+  if (init.inputs) {
+    for (const [_key, value] of Object.entries(init.inputs)) {
+      if (typeof value[1] === 'string') {
+        const valueBlockId = value[1]
+        const valueBlock = ctx.blocks[valueBlockId]
+        if (valueBlock) {
+          valueBlock.parent = id
+          ctx.usedAsValueSet.add(valueBlock)
+        }
+      }
+    }
+  }
+
+  if (ctx.adder) {
+    ctx.adder(id, block)
+  }
+
+  return {
+    isBlock: true,
+    id,
+  }
+}
+
+export const valueBlock = (opcode: string, init: BlockInit): HikkakuBlock => {
+  return block(opcode, { ...init, isValue: true })
+}
+
+const applyNextAndParent = (blocks: sb3.Block[]) => {
+  const ctx = getRootContext()
+  let lastBlock: [string, sb3.Block] | null = null
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+    if (!block || ctx.usedAsValueSet.has(block)) {
+      continue
+    }
+    const blockId = ctx.blockToId.get(block)
+    if (!blockId) {
+      throw new Error(`Block ${JSON.stringify(block)} does not have an ID`)
+    }
+    if (block.topLevel) {
+      lastBlock = null
+      block.parent = null
+    }
+
+    if (lastBlock) {
+      lastBlock[1].next = blockId
+      block.parent ??= lastBlock[0]
+    }
+
+    lastBlock = [blockId, block]
+  }
+}
+const catchNewBlocks = (
+  handler: Handler,
+  catched: (id: string, block: sb3.Block) => void,
+) => {
+  const ctx = getRootContext()
+  const oldAdder = ctx.adder
+  ctx.adder = (id: string, block: sb3.Block) => {
+    catched(id, block)
+  }
+  handler()
+  ctx.adder = oldAdder
+}
+
+export const substack = (handler: Handler) => {
+  const ctx = getRootContext()
+  const blocks: sb3.Block[] = []
+
+  catchNewBlocks(handler, (id, block) => {
+    ctx.blocks[id] = block
+    blocks.push(block)
+  })
+  applyNextAndParent(blocks)
+
+  // Pick the first executable block (skip value blocks used as inputs).
+  for (const block of blocks) {
+    if (!block || ctx.usedAsValueSet.has(block)) {
+      continue
+    }
+    const blockId = ctx.blockToId.get(block)
+    if (blockId) {
+      return blockId
+    }
+  }
+
+  return null
+}
+
+export const createBlocks = (handler: Handler) => {
+  const blocks: Record<string, sb3.Block> = {}
+  rootContext = {
+    blocks: blocks,
+    usedAsValueSet: new WeakSet(),
+    valueBlockSet: new WeakSet(),
+    blockToId: new WeakMap(),
+  }
+
+  const blocksForAddingNext: sb3.Block[] = []
+  catchNewBlocks(handler, (id, block) => {
+    blocks[id] = block
+    blocksForAddingNext.push(block)
+  })
+  applyNextAndParent(blocksForAddingNext)
+
+  const unconnectedValueBlocks: Array<{ id: string; opcode: string }> = []
+  for (const [blockId, block] of Object.entries(blocks)) {
+    if (
+      rootContext.valueBlockSet.has(block) &&
+      !rootContext.usedAsValueSet.has(block)
+    ) {
+      unconnectedValueBlocks.push({ id: blockId, opcode: block.opcode })
+    }
+  }
+  if (unconnectedValueBlocks.length > 0) {
+    const formatted = unconnectedValueBlocks
+      .map(({ id, opcode }) => `${opcode} (${id})`)
+      .join(', ')
+    rootContext = null
+    throw new Error(`Unconnected value block(s): ${formatted}`)
+  }
+
+  rootContext = null
+  return blocks
+}

package/src/compiler/index.ts

@@ -0,0 +1,6 @@
+export class Target {
+  onFlagClicked() {}
+}
+export class Compiler {
+  createTarget(_name: string) {}
+}

package/src/compiler/project.ts

@@ -0,0 +1,138 @@
+import type * as sb3 from '@pnsk-lab/sb3-types'
+import { createBlocks } from './composer'
+import type {
+  CostumeReference,
+  ListReference,
+  SoundReference,
+  VariableReference,
+} from './types'
+
+let nextAssetId = 0
+const createAssetId = () => `asset-${(++nextAssetId).toString(16)}`
+
+export class Target<IsStage extends boolean = boolean> {
+  readonly isStage: IsStage
+  readonly name: IsStage extends true ? 'Stage' : string
+  currentCostume = 0
+
+  #blocks: Record<string, sb3.Block> = {}
+  #variables: Record<string, sb3.ScalarVariable> = {}
+  #lists: Record<string, sb3.List> = {}
+  #costumes: sb3.Costume[] = []
+  #sounds: sb3.Sound[] = []
+  constructor(isStage: IsStage, name: IsStage extends true ? 'Stage' : string) {
+    this.isStage = isStage
+    this.name = name
+  }
+
+  run(handler: (target: Target<IsStage>) => void): void {
+    const blocks = createBlocks(() => {
+      handler(this)
+    })
+    this.#blocks = {
+      ...this.#blocks,
+      ...blocks,
+    }
+  }
+
+  createVariable(
+    name: string,
+    defaultValue: sb3.ScalarVal = 0,
+    isCloudVariable?: boolean,
+  ): VariableReference {
+    const id = createAssetId()
+    this.#variables[id] = isCloudVariable
+      ? [name, defaultValue, true]
+      : [name, defaultValue]
+    return {
+      id,
+      name,
+      type: 'variable',
+    }
+  }
+
+  createList(name: string, defaultValue: sb3.ScalarVal[] = []): ListReference {
+    const id = createAssetId()
+    this.#lists[id] = [name, defaultValue]
+    return {
+      id,
+      name,
+      type: 'list',
+    }
+  }
+
+  addCostume(costume: sb3.Costume): CostumeReference {
+    this.#costumes.push(costume)
+    return {
+      name: costume.name,
+      type: 'costume' as const,
+    }
+  }
+
+  addSound(sound: sb3.Sound): SoundReference {
+    this.#sounds.push(sound)
+    return {
+      name: sound.name,
+      type: 'sound' as const,
+    }
+  }
+
+  toScratch(): IsStage extends true ? sb3.Stage : sb3.Sprite {
+    const costumes =
+      this.#costumes.length > 0
+        ? this.#costumes
+        : [
+            {
+              name: this.name,
+              assetId: 'cd21514d0531fdffb22204e0ec5ed84a',
+              dataFormat: 'svg' as const,
+            },
+          ]
+    const target: sb3.Target = {
+      blocks: this.#blocks,
+      broadcasts: {},
+      variables: this.#variables,
+      lists: this.#lists,
+      sounds: this.#sounds,
+      currentCostume: this.currentCostume,
+      costumes,
+    }
+    if (this.isStage) {
+      return {
+        ...target,
+        isStage: true,
+        name: 'Stage',
+      } satisfies sb3.Stage as IsStage extends true ? sb3.Stage : sb3.Sprite
+    }
+    return {
+      ...target,
+      isStage: false,
+      name: this.name,
+      visible: true,
+    } satisfies sb3.Sprite as IsStage extends true ? sb3.Stage : sb3.Sprite
+  }
+}
+
+export class Project {
+  readonly stage: Target<true>
+  #targets: Target[] = []
+  constructor() {
+    const target = new Target(true, 'Stage')
+    this.stage = target
+    this.#targets.push(target)
+  }
+  createSprite(name: string): Target<false> {
+    const sprite = new Target(false, name)
+    this.#targets.push(sprite)
+    return sprite
+  }
+  toScratch(): sb3.ScratchProject {
+    return {
+      targets: this.#targets.map((target) => target.toScratch()),
+      meta: {
+        semver: '3.0.0',
+        agent: `Hikkaku | ${globalThis.navigator ? navigator.userAgent : 'unknown'}`,
+      },
+    }
+  }
+}

package/src/compiler/types.ts

@@ -0,0 +1,37 @@
+export type PrimitiveAvailableOnScratch = number | boolean | string
+
+export type PrimitiveSource<T extends PrimitiveAvailableOnScratch> =
+  | T
+  | HikkakuBlock
+
+export interface VariableBase {
+  id: string
+  name: string
+}
+
+export interface VariableReference extends VariableBase {
+  type: 'variable'
+}
+
+export interface ListReference extends VariableBase {
+  type: 'list'
+}
+
+export interface CostumeReference {
+  name: string
+  type: 'costume'
+}
+
+export type CostumeSource = PrimitiveSource<string> | CostumeReference
+
+export interface SoundReference {
+  name: string
+  type: 'sound'
+}
+
+export type SoundSource = PrimitiveSource<string> | SoundReference
+
+export interface HikkakuBlock {
+  isBlock: true
+  id: string
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './compiler/block-helper'
+export * from './compiler/composer'
+export * from './compiler/project'
+export * from './compiler/types'
+export * from './utils/assets'

package/src/utils/assets.ts

@@ -0,0 +1,4 @@
+export const ASSET_BLANK_SVG = 'cd21514d0531fdffb22204e0ec5ed84a'
+
+export const ASSET_CAT1 = 'bcf454acf82e4504149f7ffe07081dbc'
+export const ASSET_CAT2 = '0fb9be3e8397c983338cb71dc84d0b25'

package/src/vite/env.ts

@@ -0,0 +1,46 @@
+import {
+  DevEnvironment,
+  type HotChannel,
+  type ResolvedConfig,
+  type WebSocketServer,
+} from 'vite'
+import {
+  ESModulesEvaluator,
+  ModuleRunner,
+  type ModuleRunnerTransport,
+} from 'vite/module-runner'
+
+export function createHikkakuEnvironment(
+  name: string,
+  config: ResolvedConfig,
+  _context: {
+    ws: WebSocketServer
+  },
+): DevEnvironment {
+  const transport: ModuleRunnerTransport = {
+    send: (data) => {
+      console.log('sent', data)
+    },
+    connect(_handlers) {},
+  }
+
+  const env = new (class extends DevEnvironment {
+    runner: ModuleRunner
+    constructor(
+      name: string,
+      config: ResolvedConfig,
+      context: { hot: boolean; transport?: HotChannel },
+    ) {
+      super(name, config, context)
+      this.runner = new ModuleRunner(
+        { transport: this.hot },
+        new ESModulesEvaluator(),
+      )
+    }
+  })(name, config, {
+    transport,
+    hot: true,
+  })
+
+  return env
+}