wip super preview

Author: heapwolf

build.js

@@ -15,6 +15,8 @@ const cp = async (a, b) => fs.cp(
 async function copy (target) {
   await cp('src/index.html', target)
   await cp('src/vm.js', target)
+  await cp('src/preview.js', target)
+  await cp('src/worker.js', target)
   await cp('icons/icon.png', target)
   await cp('src/templates', target)
   await cp('src/examples', target)
@@ -35,6 +37,7 @@ async function main (argv) {
   await esbuild.build({
     entryPoints: workerEntryPoints.map((entry) => `node_modules/monaco-editor/esm/${entry}`),
     bundle: true,
+    minify: false,
     format: 'iife',
     outbase: 'node_modules/monaco-editor/esm/',
     outdir: 'src'
@@ -45,9 +48,8 @@ async function main (argv) {
     format: 'esm',
     bundle: true,
     minify: false,
-    sourcemap: true,
+    sourcemap: false,
     external: ['socket:*', 'node:*'],
-    keepNames: true,
     loader: {
       '.ttf': 'file'
     }
@@ -57,10 +59,7 @@ async function main (argv) {
 
   const opts = {
     ...params,
-    outdir: target,
-    minifyWhitespace: false,
-    minifyIdentifiers: true,
-    minifySyntax: true
+    outdir: target
   }
   await esbuild.build(opts)
   await copy(target)

socket.ini

@@ -83,9 +83,13 @@ watch = true
 ; default value: true
 reload = true
 
+[webview.service-workers]
+
+/ = /worker.js
 
 ; Mount file system paths in webview navigator
 [webview.navigator.mounts]
+$HOST_HOME = /user/home
 ; $HOST_HOME/directory-in-home-folder/ = /mount/path/in/navigator
 ; $HOST_CONTAINER/directory-app-container/ = /mount/path/in/navigator
 ; $HOST_PROCESS_WORKING_DIRECTORY/directory-in-app-process-working-directory/ = /mount/path/in/navigator
@@ -267,6 +271,7 @@ codesign_paths = ""
 ; default value: "13.0.0"
 ; minimum_supported_version = "13.0.0"
 
+trafficLightPosition = "10x24"
 
 ; The icon to use for identifying your app on MacOS.
 icon = "icons/icon.png"
@@ -323,11 +328,11 @@ width = 80%
 
 ; Minimum height of the window in pixels or as a percentage of the screen.
 ; default value: 0
-; min_height = 0
+min_height = 500
 
 ; Minimum width of the window in pixels or as a percentage of the screen.
 ; default value: 0
-; min_width = 0
+min_width = 700
 
 ; If the window is resizable or not.
 ; default value: true
@@ -337,6 +342,8 @@ width = 80%
 ; default value: false
 ; frameless = false
 
+titleBarStyle = "hiddenInset"
+
 ; If the window is utility window or not.
 ; default value: false
 ; utility = false
@@ -385,6 +392,3 @@ runner_mac_flags = ""
 runner_win32 = ""
 ; The headless runner command flags for Windows
 runner_win32_flags = ""
-
-[permissions]
-allow_service_worker = false

src/css/index.css

@@ -253,20 +253,28 @@ main-component {
 
 header {
   display: grid;
-  grid-template-columns: 34px 250px 34px 1fr 150px;
+  grid-template-columns: 1fr 34px 250px 34px 1fr;
   gap: 12px;
   grid-template-rows: auto;
   align-content: center;
-  height: 82px;
+  height: 50px;
   padding: 0 12px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  cursor: default;
+  app-region: drag; /* windows */
+  --app-region: drag; /* mac/linux */
+}
+
+header [platform="darwin"] {
+  padding-left: 35%;
+  padding-right: 35%;
 }
 
 #split-main {
-  top: 80px;
+  top: 50px;
   border-top: 1px solid var(--tonic-border);
 }
 

src/css/preview.css

@@ -0,0 +1,53 @@
+app-preview {
+  position: absolute;
+  top: 0; bottom: 0; left: 0; right: 0;
+  background: var(--tonic-background);
+}
+
+app-preview .container {
+  position: absolute;
+  top: 0px; bottom: 0px; left: 0px; right: 0px;
+}
+
+app-preview .device {
+  position: relative;
+  height: 100%;
+  border: 1px solid var(--tonic-border);
+  overflow: hidden;
+}
+
+app-preview .device iframe {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+}
+
+/* Source: https://github.com/kylebshr/ScreenCorners */
+
+app-preview .device[device="ios"] {
+  aspect-ratio: 9 / 19.5;
+  border-radius: 39px;
+  margin: 60px;
+}
+
+app-preview .device[device="ipad"] {
+  aspect-ratio: 3 / 4;
+  border-radius: 18px;
+  margin: 60px;
+}
+
+app-preview .device[device="darwin"] {
+  aspect-ratio: initial;
+  border-radius: 12px;
+  position: absolute;
+  top: 60px;
+  border-top: 1px solid var(--tonic-border);
+  left: 60px;
+  right: 60px;
+  bottom: 60px;
+  height: unset;
+}

src/css/tonic-overrides.css

@@ -14,6 +14,19 @@ tonic-split .tonic--split-horizontal {
   border-top: 1px solid var(--tonic-border);
 }
 
+tonic-select .tonic--select {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+tonic-select select:not([multiple]) {
+  padding: 6px 30px 6px 10px;
+}
+
+tonic-select .tonic--arrow:before {
+  top: 43%;
+}
+
 tonic-split .tonic--split-handle {
   z-index: 20 !important;
 }

src/editor.js

@@ -102,12 +102,17 @@ class AppEditor extends Tonic {
 
   async writeToDisk (projectNode, data) {
     const app = document.querySelector('app-view')
+    const preview = document.querySelector('app-preview')
+
+    const zoom = this.props.parent.state.scaleFactor || '1'
 
     try {
       await fs.promises.writeFile(projectNode.id, data)
     } catch (err) {
       console.error(`Unable to write to ${dest}`, err)
     }
+
+    this.props.parent.reloadPreviewWindows()
   }
 
   async loadProjectNode (projectNode) {

src/index.html

@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="css/editor.main.css">
     <link rel="stylesheet" href="css/tonic-overrides.css">
     <link rel="stylesheet" href="css/xterm.css">
+    <link rel="stylesheet" href="css/preview.css">
     <link rel="stylesheet" href="css/project.css">
     <link rel="stylesheet" href="css/index.css">
   </head>