From f214577b088876fdc3ec140621b314060ed7fcef Mon Sep 17 00:00:00 2001 From: Elijah Mooring Date: Tue, 2 Aug 2022 15:08:09 -0500 Subject: [PATCH] ref!: several fixes and improvements --- bundle/code.ts | 4 ++-- bundle/css.ts | 14 ++++++++++++++ bundle/transform-svelte.ts | 15 ++------------- test/App.svelte | 31 +++++++++++++++---------------- test/deps.bridge.ts | 3 +++ test/dev.ts | 3 ++- test/foo.css | 3 --- test/main.ts | 13 ++++++++++++- test/state.bridge.ts | 31 +++++++++++++++++++++++++++++++ test/svelte.help.ts | 17 ----------------- 10 files changed, 81 insertions(+), 53 deletions(-) create mode 100644 bundle/css.ts create mode 100644 test/deps.bridge.ts delete mode 100644 test/foo.css create mode 100644 test/state.bridge.ts delete mode 100644 test/svelte.help.ts diff --git a/bundle/code.ts b/bundle/code.ts index ab646ec..da40d8c 100644 --- a/bundle/code.ts +++ b/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)) diff --git a/bundle/css.ts b/bundle/css.ts new file mode 100644 index 0000000..2342552 --- /dev/null +++ b/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) +} diff --git a/bundle/transform-svelte.ts b/bundle/transform-svelte.ts index 7512725..547f07a 100644 --- a/bundle/transform-svelte.ts +++ b/bundle/transform-svelte.ts @@ -1,6 +1,7 @@ import { compile as compileSvelte, preprocess as preprocessSvelte } from 'https://cdn.jsdelivr.net/npm/svelte@3.49.0/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) -} diff --git a/test/App.svelte b/test/App.svelte index a72c242..61779a8 100644 --- a/test/App.svelte +++ b/test/App.svelte @@ -1,33 +1,32 @@
-

Hello, {name}!

+

Hello, {state.name}!

- {#if imagePath} -
+ {#if $photoUrl} +
+
+ +
-
+
+
- + {:else} - + {/if}
diff --git a/test/deps.bridge.ts b/test/deps.bridge.ts new file mode 100644 index 0000000..aad2735 --- /dev/null +++ b/test/deps.bridge.ts @@ -0,0 +1,3 @@ +export * as transitions from 'https://cdn.jsdelivr.net/npm/svelte@3.49.0/transition/index.mjs' +export * as svelte from 'https://cdn.jsdelivr.net/npm/svelte@3.49.0/index.mjs' +export { UI } from 'https://code.jikno.com/design@master/mod.ts' diff --git a/test/dev.ts b/test/dev.ts index bca9f84..bd0cf9b 100644 --- a/test/dev.ts +++ b/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', }, }, diff --git a/test/foo.css b/test/foo.css deleted file mode 100644 index a8bf2c6..0000000 --- a/test/foo.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - padding: 100px -} \ No newline at end of file diff --git a/test/main.ts b/test/main.ts index fc4833f..5ae9fc8 100644 --- a/test/main.ts +++ b/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 diff --git a/test/state.bridge.ts b/test/state.bridge.ts new file mode 100644 index 0000000..c8f3043 --- /dev/null +++ b/test/state.bridge.ts @@ -0,0 +1,31 @@ +import { makeStorable } from 'https://deno.land/x/storable@1.1.1/mod.ts' +import { getPlugin, isMobile } from '../runtime.ts' + +export class AppState { + photoUrl = makeStorable(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) + } +} diff --git a/test/svelte.help.ts b/test/svelte.help.ts deleted file mode 100644 index 07f4314..0000000 --- a/test/svelte.help.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { isMobile, getPlugin } from '../runtime.ts' - -export async function takeSelfie() { - if (!isMobile()) return 'https://picsum.photos/500' - - const camera = getPlugin('@capacitor/camera') - - const image = await camera.Camera.getPhoto({ - quality: 100, - allowEditing: true, - resultType: camera.CameraResultType.Uri, - source: camera.CameraSource.Camera, - direction: camera.CameraDirection.Front, - }) - - return image.webPath -}