@weaverclub/render 0.0.2 → 0.0.3

package/bunfig.toml

@@ -1,3 +0,0 @@
-[serve.static]
-plugins = ["bun-plugin-tailwind"]
-env = "BUN_PUBLIC_*"

package/ideas.md

@@ -1,11 +0,0 @@
-- [ ] Implement dark mode
-- [ ] Multi theme support
-- [ ] Global Component integration (example: change button variant in Header)
-- [ ] Undo/Apply changes
-- [ ] Multi tab support
-- [ ] Icon swapper integration (Lucide/HugeIcons etc)
-- [ ] ACP integration
-
-# v1.0 features
-- [ ] Multi lang/lib/framework support (React, Vue, Svelte, Solid, Angular etc)
-- [ ] Static build

package/publish.ts

@@ -1,62 +0,0 @@
-import { $ } from 'bun'
-import pkg from './package.json'
-
-const args = Bun.argv.slice(2)
-const versionArg = args[0]
-
-if (!versionArg) {
-	console.error('❌ Usage: bun run publish <version>')
-	console.error('   Example: bun run publish 1.0.2')
-	console.error('   Example: bun run publish patch')
-	console.error('   Example: bun run publish minor')
-	console.error('   Example: bun run publish major')
-	process.exit(1)
-}
-
-const currentVersion = pkg.version
-let newVersion: string
-
-if (['patch', 'minor', 'major'].includes(versionArg)) {
-	const [major, minor, patch] = currentVersion.split('.').map(Number)
-	switch (versionArg) {
-		case 'patch':
-			newVersion = `${major}.${minor}.${(patch ?? 0) + 1}`
-			break
-		case 'minor':
-			newVersion = `${major}.${(minor ?? 0) + 1}.0`
-			break
-		case 'major':
-			newVersion = `${(major ?? 0) + 1}.0.0`
-			break
-		default:
-			newVersion = currentVersion
-	}
-} else {
-	newVersion = versionArg
-}
-
-console.log(`📦 Publishing render v${newVersion}`)
-console.log(`   Current version: ${currentVersion}`)
-console.log('')
-
-// Run tests first
-// console.log('🧪 Running tests...')
-// await $`bun run test run`
-
-// Bump version
-console.log(`\n📝 Bumping version to ${newVersion}...`)
-await $`npm version ${newVersion} --no-git-tag-version`
-
-// Build
-console.log('\n🔨 Building...')
-await $`bun run build`
-
-// Git commit, tag, and push
-console.log('\n📤 Committing and pushing...')
-await $`git add package.json`
-await $`git commit -m "v${newVersion}"`
-await $`git tag v${newVersion}`
-await $`git push origin main --tags`
-
-console.log(`\n✅ Done! v${newVersion} is being published via GitHub Actions.`)
-console.log(`   Check: https://github.com/weaverclub/render/actions`)

package/src/cli/command/renderCommand.ts

@@ -1,112 +0,0 @@
-import { watch } from 'node:fs'
-import { Path } from '@effect/platform'
-import { BunContext } from '@effect/platform-bun'
-import { Console, Effect } from 'effect'
-import { loadCSS } from '#core/css/css'
-import { compileTailwindCss } from '#core/css/tailwind'
-import { loadStories } from '#core/story'
-import {
-	notifyHmrClients,
-	startBackend,
-	updateBackendState
-} from '#server/backend'
-
-export const renderCommand = Effect.fn(function* ({ path }: RenderCommandArgs) {
-	const { resolve } = yield* Path.Path
-
-	const absolutePath = resolve(path)
-
-	let stories = yield* loadStories(absolutePath)
-	let css = yield* loadCSS(absolutePath)
-
-	yield* Console.log(`Found ${stories.length} stories`)
-
-	const backend = yield* startBackend({
-		stories,
-		css,
-		projectRoot: absolutePath
-	})
-
-	yield* Console.log('👀 Watching for file changes...')
-
-	// Set up file watcher for HMR
-	let debounceTimer: ReturnType<typeof setTimeout> | null = null
-	const watcher = watch(
-		absolutePath,
-		{ recursive: true },
-		(_event, filename) => {
-			// Only react to relevant file changes
-			if (!filename) return
-
-			// Ignore node_modules entirely
-			if (filename.includes('node_modules')) return
-
-			const isRelevant =
-				filename.endsWith('.tsx') ||
-				filename.endsWith('.ts') ||
-				filename.endsWith('.jsx') ||
-				filename.endsWith('.js') ||
-				filename.endsWith('.css')
-
-			if (!isRelevant) return
-
-			// Debounce rapid changes
-			if (debounceTimer) clearTimeout(debounceTimer)
-			debounceTimer = setTimeout(async () => {
-				console.log(`\n🔄 File changed: ${filename}`)
-				console.time('   ⏱️  Total HMR')
-
-				try {
-					// Run story loading and CSS compilation in parallel
-					// Total time = max(stories, css) instead of sum
-					const [newStories, newCss] = await Promise.all([
-						Effect.runPromise(
-							loadStories(absolutePath).pipe(Effect.provide(BunContext.layer))
-						),
-						Effect.runPromise(
-							compileTailwindCss(absolutePath).pipe(
-								Effect.provide(BunContext.layer)
-							)
-						)
-					])
-
-					stories = newStories
-					css = [newCss]
-					console.log(
-						`   Reloaded ${stories.length} stories, CSS: ${newCss.compiledOutput.length} bytes`
-					)
-
-					// Update backend state for new requests
-					updateBackendState({
-						stories,
-						css,
-						projectRoot: absolutePath
-					})
-
-					// Notify connected clients
-					notifyHmrClients()
-					console.timeEnd('   ⏱️  Total HMR')
-					console.log(`   ✅ HMR complete`)
-				} catch (error) {
-					console.timeEnd('   ⏱️  Total HMR')
-					console.error('   Error during reload:', error)
-				}
-			}, 100)
-		}
-	)
-
-	// Handle cleanup on exit
-	process.on('SIGINT', () => {
-		console.log('\n\n👋 Shutting down...')
-		watcher.close()
-		backend.stop()
-		process.exit(0)
-	})
-
-	// Keep the server running
-	yield* Effect.never
-})
-
-type RenderCommandArgs = {
-	path: string
-}

package/src/cli/entrypoint.ts

@@ -1,25 +0,0 @@
-#! /usr/bin/env bun
-
-import { Args, Command } from '@effect/cli'
-import { BunContext, BunRuntime } from '@effect/platform-bun'
-import { Effect } from 'effect'
-import pkg from '../../package.json' with { type: 'json' }
-import { renderCommand } from './command/renderCommand'
-
-const path = Args.path()
-
-const command = Command.make('render', { path }).pipe(
-	Command.withDescription('The simplest way to preview React components'),
-	Command.withHandler(renderCommand)
-)
-
-const cli = Command.run(command, {
-	name: 'Render',
-	version: pkg.version
-})
-
-Effect.suspend(() => cli(process.argv)).pipe(
-	Effect.provide(BunContext.layer),
-	Effect.tapErrorCause(Effect.logError),
-	BunRuntime.runMain
-)

package/src/core/bundler.ts

@@ -1,180 +0,0 @@
-import { FileSystem } from '@effect/platform'
-import { Effect, Option, Schema } from 'effect'
-import { findNearestNodeModules, getProjectDependencies } from './pkg'
-import { findNearestTsconfig } from './tsconfig'
-
-// Common React-related packages that might not be direct dependencies
-const commonExternals = [
-	'react',
-	'react-dom',
-	'react/jsx-runtime',
-	'react/jsx-dev-runtime',
-	'@weaverclub/render'
-]
-
-const moduleSchema = Schema.Record({
-	key: Schema.String,
-	value: Schema.Any
-})
-
-export const bundleStoryFile = Effect.fn(function* ({
-	storyPath,
-	projectRoot
-}: BundleStoryFileArgs) {
-	const tsconfigPath = yield* findNearestTsconfig(projectRoot)
-	const deps = yield* getProjectDependencies(projectRoot)
-	const args = ['build', storyPath, '--target', 'bun', '--format', 'esm']
-
-	for (const dep of deps) args.push('--external', dep)
-	for (const ext of commonExternals)
-		if (!deps.includes(ext)) args.push('--external', ext)
-	if (Option.isSome(tsconfigPath))
-		args.push('--tsconfig-override', tsconfigPath.value)
-
-	const proc = Bun.spawn(['bun', ...args], {
-		cwd: projectRoot,
-		stdout: 'pipe',
-		stderr: 'pipe'
-	})
-
-	const [stdout, stderr] = yield* Effect.all(
-		[
-			Effect.tryPromise(() => new Response(proc.stdout).text()),
-			Effect.tryPromise(() => new Response(proc.stderr).text())
-		],
-		{
-			concurrency: 'unbounded'
-		}
-	)
-
-	const exitCode = yield* Effect.tryPromise(() => proc.exited)
-
-	if (exitCode !== 0)
-		return yield* Effect.fail(`Bundle failed:\n${stderr || stdout}`)
-
-	return stdout
-})
-
-/**
- * Bundle a story file for the browser with React hydration support.
- * This creates a self-contained bundle that can run in the browser.
- */
-export const bundleStoryForBrowser = Effect.fn(function* ({
-	storyPath,
-	projectRoot,
-	storyId
-}: BundleStoryForBrowserArgs) {
-	const tsconfigPath = yield* findNearestTsconfig(projectRoot)
-
-	// Create a temporary entry file that imports the story and hydrates it
-	const fs = yield* FileSystem.FileSystem
-	const nodeModules = yield* findNearestNodeModules(projectRoot)
-
-	const tempDir = Option.isSome(nodeModules)
-		? `${nodeModules.value}/.cache/render`
-		: `${projectRoot}/.render-cache`
-
-	yield* fs.makeDirectory(tempDir, { recursive: true })
-
-	const entryFile = `${tempDir}/hydrate-${storyId.replace(/[^a-z0-9]/gi, '_')}.tsx`
-
-	// Write the hydration entry file - using explicit React import for JSX
-	const entryCode = `
-import * as React from 'react';
-import * as ReactDOMClient from 'react-dom/client';
-import * as StoryModule from '${storyPath}';
-
-const rootElement = document.getElementById('root');
-
-// Find the story export
-let StoryExport;
-for (const [key, exported] of Object.entries(StoryModule)) {
-  if (exported && typeof exported === 'object' && '~type' in exported && exported['~type'] === 'ReactStory') {
-    StoryExport = exported;
-    break;
-  }
-}
-
-if (StoryExport && rootElement) {
-  // Get default props (empty for now, will be enhanced later)
-  const defaultProps = {};
-  const element = StoryExport.render(defaultProps);
-  ReactDOMClient.hydrateRoot(rootElement, element);
-}
-`
-
-	yield* fs.writeFileString(entryFile, entryCode)
-
-	// Build for browser
-	const args = ['build', entryFile, '--target', 'browser', '--format', 'esm']
-
-	// Don't mark anything as external for browser bundle - we need everything inlined
-	if (Option.isSome(tsconfigPath))
-		args.push('--tsconfig-override', tsconfigPath.value)
-
-	const proc = Bun.spawn(['bun', ...args], {
-		cwd: projectRoot,
-		stdout: 'pipe',
-		stderr: 'pipe'
-	})
-
-	const [stdout, stderr] = yield* Effect.all(
-		[
-			Effect.tryPromise(() => new Response(proc.stdout).text()),
-			Effect.tryPromise(() => new Response(proc.stderr).text())
-		],
-		{
-			concurrency: 'unbounded'
-		}
-	)
-
-	const exitCode = yield* Effect.tryPromise(() => proc.exited)
-
-	// Clean up temp file
-	yield* fs.remove(entryFile).pipe(Effect.ignore)
-
-	if (exitCode !== 0)
-		return yield* Effect.fail(`Browser bundle failed:\n${stderr || stdout}`)
-
-	return stdout
-})
-
-export const importStoryWithBundler = Effect.fn(function* ({
-	storyPath,
-	projectRoot
-}: ImportStoryWithBundlerArgs) {
-	const fs = yield* FileSystem.FileSystem
-
-	const nodeModules = yield* findNearestNodeModules(projectRoot)
-	const bundledCode = yield* bundleStoryFile({
-		storyPath,
-		projectRoot
-	})
-
-	const tempFile = yield* fs.makeTempFileScoped({
-		directory: Option.isSome(nodeModules) ? nodeModules.value : undefined,
-		suffix: '.mjs'
-	})
-
-	yield* fs.writeFileString(tempFile, bundledCode)
-
-	const module = yield* Effect.tryPromise(() => import(tempFile))
-
-	return yield* Schema.decodeUnknown(moduleSchema)(module)
-})
-
-type BundleStoryFileArgs = {
-	storyPath: string
-	projectRoot: string
-}
-
-type BundleStoryForBrowserArgs = {
-	storyPath: string
-	projectRoot: string
-	storyId: string
-}
-
-type ImportStoryWithBundlerArgs = {
-	storyPath: string
-	projectRoot: string
-}

package/src/core/control/arrayControl.ts

@@ -1,15 +0,0 @@
-import { Control } from './control'
-
-export class ArrayControl<T> extends Control {
-	public defaultValue: Array<T>
-
-	public constructor(args: ArrayControlArgs<T>) {
-		super(args.name)
-		this.defaultValue = args.defaultValue
-	}
-}
-
-type ArrayControlArgs<T> = {
-	name: string
-	defaultValue: Array<T>
-}

package/src/core/control/booleanControl.ts

@@ -1,15 +0,0 @@
-import { Control } from './control'
-
-export class BooleanControl extends Control {
-	public defaultValue: boolean
-
-	public constructor(args: BooleanControlArgs) {
-		super(args.name)
-		this.defaultValue = args.defaultValue
-	}
-}
-
-type BooleanControlArgs = {
-	name: string
-	defaultValue: boolean
-}

package/src/core/control/control.ts

@@ -1,7 +0,0 @@
-export class Control {
-	public name: string
-
-	public constructor(name: string) {
-		this.name = name
-	}
-}

package/src/core/control/controlBuilder.ts

@@ -1,87 +0,0 @@
-import type { Control } from './control'
-
-export interface ControlBuilder<Props, Used extends keyof Props> {
-	array<Name extends Exclude<ArrayPropNames<Props>, Used> & string>(
-		name: Name,
-		options: {
-			defaultValue: Props[Name]
-		}
-	): ControlBuilder<Props, Used | Name>
-
-	bool<Name extends Exclude<BooleanPropNames<Props>, Used> & string>(
-		name: Name,
-		options: {
-			defaultValue: boolean
-		}
-	): ControlBuilder<Props, Used | Name>
-
-	number<Name extends Exclude<NumberPropNames<Props>, Used> & string>(
-		name: Name,
-		options: {
-			defaultValue: number
-		}
-	): ControlBuilder<Props, Used | Name>
-
-	string<Name extends Exclude<StringPropNames<Props>, Used> & string>(
-		name: Name,
-		options: {
-			defaultValue: string
-		}
-	): ControlBuilder<Props, Used | Name>
-
-	variant<Name extends Exclude<VariantPropNames<Props>, Used> & string>(
-		name: Name,
-		options: {
-			defaultValue: ExtractStringLiteralUnion<Props[Name]>
-			options: ExtractStringLiteralUnion<Props[Name]>[]
-		}
-	): ControlBuilder<Props, Used | Name>
-}
-
-type NonNullableValue<T> = T extends null | undefined ? never : T
-
-export type ExtractStringLiteralUnion<T> =
-	NonNullableValue<T> extends string
-		? string extends NonNullableValue<T>
-			? never
-			: NonNullableValue<T>
-		: never
-
-export type ArrayPropNames<Props> = {
-	[K in keyof Props]: NonNullableValue<Props[K]> extends readonly unknown[]
-		? K
-		: never
-}[keyof Props]
-
-export type BooleanPropNames<Props> = {
-	[K in keyof Props]: NonNullableValue<Props[K]> extends boolean
-		? boolean extends NonNullableValue<Props[K]>
-			? K
-			: never
-		: never
-}[keyof Props]
-
-export type NumberPropNames<Props> = {
-	[K in keyof Props]: NonNullableValue<Props[K]> extends number
-		? number extends NonNullableValue<Props[K]>
-			? K
-			: never
-		: never
-}[keyof Props]
-
-export type StringPropNames<Props> = {
-	[K in keyof Props]: NonNullableValue<Props[K]> extends string
-		? string extends NonNullableValue<Props[K]>
-			? K
-			: never
-		: never
-}[keyof Props]
-
-export type VariantPropNames<Props> = {
-	[K in keyof Props]: ExtractStringLiteralUnion<Props[K]> extends never
-		? never
-		: K
-}[keyof Props]
-
-// biome-ignore lint/suspicious/noExplicitAny: Required for flexible builder type
-export type UnfinishedControls = ControlBuilder<any, any> | Control[]

package/src/core/control/numberControl.ts

@@ -1,15 +0,0 @@
-import { Control } from './control'
-
-export class NumberControl extends Control {
-	public defaultValue: number
-
-	public constructor(args: NumberControlArgs) {
-		super(args.name)
-		this.defaultValue = args.defaultValue
-	}
-}
-
-type NumberControlArgs = {
-	name: string
-	defaultValue: number
-}

package/src/core/control/stringControl.ts

@@ -1,15 +0,0 @@
-import { Control } from './control'
-
-export class StringControl extends Control {
-	public defaultValue: string
-
-	public constructor(args: StringControlArgs) {
-		super(args.name)
-		this.defaultValue = args.defaultValue
-	}
-}
-
-type StringControlArgs = {
-	name: string
-	defaultValue: string
-}

package/src/core/control/variantControl.ts

@@ -1,18 +0,0 @@
-import { Control } from './control'
-
-export class VariantControl<T> extends Control {
-	public defaultValue: T
-	public options: Array<T>
-
-	public constructor(args: VariantControlArgs<T>) {
-		super(args.name)
-		this.defaultValue = args.defaultValue
-		this.options = args.options
-	}
-}
-
-type VariantControlArgs<T> = {
-	name: string
-	options: Array<T>
-	defaultValue: T
-}

package/src/core/css/css.ts

@@ -1,50 +0,0 @@
-import { Array as Arr, Effect } from 'effect'
-import { getProjectDependencies } from '../pkg'
-import { compileTailwindCss } from './tailwind'
-
-const tailwindDependencyNames = [
-	'tailwindcss',
-	'@tailwindcss/vite',
-	'@tailwindcss/cli'
-]
-
-const cssStategyMap: Record<
-	CSSStrategy,
-	(projectRoot: string) => Effect.Effect<CSS, Error>
-> = {
-	tailwind: compileTailwindCss
-}
-
-export const loadCSS = Effect.fn(function* (projectRoot: string) {
-	const strategies = yield* detectCSSStrategies(projectRoot)
-
-	const tasks = Arr.map(Array.from(strategies), (strategy) => {
-		const loadFn = cssStategyMap[strategy]
-		return loadFn(projectRoot)
-	})
-
-	const results = yield* Effect.all(tasks, {
-		concurrency: 'unbounded'
-	})
-
-	return results
-})
-
-export const detectCSSStrategies = Effect.fn(function* (projectRoot: string) {
-	const deps = yield* getProjectDependencies(projectRoot)
-
-	const strategies = new Set<CSSStrategy>()
-
-	for (const depName of tailwindDependencyNames) {
-		if (deps.includes(depName)) strategies.add('tailwind')
-	}
-
-	return strategies
-})
-
-type CSSStrategy = 'tailwind'
-
-export type CSS = {
-	paths: string[]
-	compiledOutput: string
-}