ref!: several fixes and improvements

bundle/code.ts

@@ -17,7 +17,7 @@ const tsReservedWords = [
 	'finally',
 	'for',
 	'function',
-	'If',
+	'if',
 	'import',
 	'in',
 	'istanceOf',
@@ -50,7 +50,7 @@ const tsReservedWords = [
 ]
 
 export function getVariables(code: string) {
-	const idRegex = /\w+/g
+	const idRegex = /[a-zA-Z_$][a-zA-Z0-9_$]*/g
 	const ids = code.match(idRegex) || []
 
 	return ids.filter(id => !tsReservedWords.includes(id))

bundle/css.ts

@@ -0,0 +1,14 @@
+import { unwindCompiler } from './deps.ts'
+import { UnwindParams } from './mod.ts'
+
+export function runUnwind(code: string, url: URL, unwindParams: UnwindParams): string {
+	if (url.protocol === 'file:') {
+		if (unwindParams.noCompileLocal) return code
+
+		return unwindCompiler.insertUnwindHooks(code, unwindParams)
+	}
+
+	if (unwindParams.noCompileRemote) return code
+
+	return unwindCompiler.insertUnwindHooks(code, unwindParams)
+}

bundle/transform-svelte.ts

@@ -1,6 +1,7 @@
 import { compile as compileSvelte, preprocess as preprocessSvelte } from 'https://cdn.jsdelivr.net/npm/[email protected]/compiler.mjs'
 import { addTrailingLog, removeTrailingLog } from './code.ts'
-import { esBuild, unwindCompiler } from './deps.ts'
+import { runUnwind } from './css.ts'
+import { esBuild } from './deps.ts'
 import { UnwindParams } from './mod.ts'
 
 export interface SvelteTransformation {
@@ -77,15 +78,3 @@ async function preprocessScript({ content, attributes }: PreprocessScriptParams)
 
 	return res
 }
-
-function runUnwind(code: string, url: URL, unwindParams: UnwindParams): string {
-	if (url.protocol === 'file:') {
-		if (unwindParams.noCompileLocal) return code
-
-		return unwindCompiler.insertUnwindHooks(code, unwindParams)
-	}
-
-	if (unwindParams.noCompileRemote) return code
-
-	return unwindCompiler.insertUnwindHooks(code, unwindParams)
-}

test/App.svelte

@@ -1,33 +1,32 @@
 <script lang="ts">
-	import { takeSelfie } from './svelte.help'
+	import { transitions, UI } from './deps.bridge'
+	import { AppState } from './state.bridge'
 
-	export let name: string
-	let imagePath: string | null = null
+	export let state: AppState
 
-	async function getSelfie() {
-		const path = await takeSelfie()
-		imagePath = path
-	}
+	const { slide } = transitions
+	const { photoUrl } = state
 </script>
 
 <div safe-area class="h-full">
 	<div class="p-20 h-full flex flex-col items-stretch justify-center">
 		<div>
-			<h1 class="text-center text-3xl">Hello, {name}!</h1>
+			<h1 class="text-center text-3xl">Hello, {state.name}!</h1>
 
 			<div class="h-20" />
 
-			{#if imagePath}
-				<div
-					class="mx-auto w-200 h-200 rounded-full border-2 boder-red bg-center bg-cover bg-no-repeat"
-					style="background-image: url('{imagePath}')"
-				/>
+			{#if $photoUrl}
+				<div in:slide|local>
+					<div class="mx-auto w-200 h-200 rounded-full border-2 border-dark dark:border-light overflow-hidden">
+						<UI.Image src={$photoUrl} />
+					</div>
 
-				<div class="h-20" />
+					<div class="h-20" />
+				</div>
 
-				<button class="btn-spacious w-full" on:click={() => (imagePath = null)}> Remove Selfie </button>
+				<button class="btn-spacious w-full" on:click={() => state.removePhoto()}>Remove Selfie</button>
 			{:else}
-				<button class="btn-primary-spacious w-full" on:click={getSelfie}>Take Selfie</button>
+				<button class="btn-primary-spacious w-full" on:click={() => state.takeSelfie()}>Take Selfie</button>
 			{/if}
 		</div>
 	</div>

test/deps.bridge.ts

@@ -0,0 +1,3 @@
+export * as transitions from 'https://cdn.jsdelivr.net/npm/[email protected]/transition/index.mjs'
+export * as svelte from 'https://cdn.jsdelivr.net/npm/[email protected]/index.mjs'
+export { UI } from 'https://code.jikno.com/design@master/mod.ts'

test/dev.ts

@@ -11,11 +11,12 @@ if (command === 'mobile') {
 		watch: true,
 		appId: 'com.vehmloewff.captest',
 		appName: 'Cap Mobile Test',
-		reload: true,
+		// reload: true,
 		plugins: ['@capacitor/camera', '@capacitor/splash-screen'],
 		capacitorConfig: {
 			plugins: {
 				SplashScreen: {
+					launchAutoHide: false,
 					backgroundColor: '#21252B',
 				},
 			},

test/main.ts

@@ -1,10 +1,21 @@
 // @deno-types=../svelte.d.ts
 import App from './App.svelte'
 import { setupJiknoDesign } from '../../design/mod.ts'
+import { getPlugin, isMobile } from '../runtime.ts'
+import { AppState } from './state.bridge.ts'
+// import { start } from './main.tsx'
 
 setupJiknoDesign()
 
+// start()
 new App({
 	target: document.body,
-	props: { name: 'Elijah Mooring' },
+	props: { state: new AppState() },
 })
+
+if (isMobile()) {
+	getPlugin('@capacitor/splash-screen').SplashScreen.hide()
+}
+
+// 311.56kb
+// 125.01kb

test/state.bridge.ts

@@ -0,0 +1,31 @@
+import { makeStorable } from 'https://deno.land/x/[email protected]/mod.ts'
+import { getPlugin, isMobile } from '../runtime.ts'
+
+export class AppState {
+	photoUrl = makeStorable<string | null>(null)
+	name = 'Jason'
+
+	async takeSelfie() {
+		if (!isMobile()) return this.photoUrl.set('https://picsum.photos/500')
+
+		const camera = getPlugin('@capacitor/camera')
+
+		try {
+			const image = await camera.Camera.getPhoto({
+				quality: 100,
+				allowEditing: true,
+				resultType: camera.CameraResultType.Uri,
+				source: camera.CameraSource.Camera,
+				direction: camera.CameraDirection.Front,
+			})
+
+			this.photoUrl.set(image.webPath)
+		} catch (error) {
+			console.log(error.message)
+		}
+	}
+
+	removePhoto() {
+		this.photoUrl.set(null)
+	}
+}