Merge pull request #67 from socketsupply/remove-esbuild

Remove esbuild

build.js

@@ -1,30 +1,10 @@
 #!/usr/bin/env node
-import path from 'node:path'
-import fs from 'node:fs/promises'
-
+//
+// Most newer modules don't need to be bundled. But the monaco
+// and xterm packages rely on bundler-features heavily.
+//
 import esbuild from 'esbuild'
 
-const __dirname = path.dirname(new URL(import.meta.url).pathname)
-
-const cp = async (a, b) => fs.cp(
-  path.resolve(a),
-  path.join(b, path.basename(a)),
-  { recursive: true, force: true }
-)
-
-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/settings.json', target)
-  await cp('src/fonts', target)
-  await cp('src/lib', target)
-  await cp('src/pages', target)
-  await cp('src/css', target)
-}
-
 async function main (argv) {
   const workerEntryPoints = [
     'vs/language/json/json.worker.js',
@@ -37,25 +17,25 @@ async function main (argv) {
   await esbuild.build({
     entryPoints: workerEntryPoints.map((entry) => `node_modules/monaco-editor/esm/${entry}`),
     bundle: true,
-    minify: false,
+    minify: true,
     format: 'iife',
     outbase: 'node_modules/monaco-editor/esm/',
     outdir: 'src/lib'
   })
 
   const params = {
-    entryPoints: ['src/index.js'],
+    entryPoints: ['src/vendor.js'],
     format: 'esm',
     bundle: true,
-    minify: false,
+    minify: true,
     sourcemap: false,
-    external: ['socket:*', 'node:*'],
     loader: {
       '.ttf': 'file'
     }
   }
 
   const target = process.env.PREFIX
+
   if (!target) {
     console.log('This script should not be run directly. It will be run by the SSC command.')
     process.exit(0)
@@ -65,8 +45,8 @@ async function main (argv) {
     ...params,
     outdir: target
   }
+
   await esbuild.build(opts)
-  await copy(target)
 }
 
 main(process.argv.slice(2))

importmap.json

@@ -0,0 +1,8 @@
+{
+  "imports": {
+    "@socketsupply/tonic": "npm:@socketsupply/tonic",
+    "@socketsupply/components": "npm:@socketsupply/components",
+    "@socketsupply/components/dialog": "npm:@socketsupply/components/dialog",
+    "@socketsupply/indexed": "npm:@socketsupply/indexed"
+  }
+}

package.json

@@ -9,15 +9,12 @@
     "type": "git"
   },
   "devDependencies": {
-    "@socketsupply/components": "^14.0.13",
-    "@socketsupply/indexed": "^1.0.3",
-    "@socketsupply/tonic": "^15.1.2",
-    "esbuild": "^0.20.0",
     "monaco-editor": "^0.46.0",
-    "standard": "^17.1.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
-    "xterm-addon-search": "^0.13.0"
+    "xterm-addon-search": "^0.13.0",
+    "esbuild": "^0.20.0",
+    "standard": "^17.1.0"
   },
   "scripts": {
     "build": "ssc build -r -o",
@@ -27,6 +24,9 @@
   "author": "Socket Supply Co. <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@socketsupply/indexed": "^1.0.3",
+    "@socketsupply/tonic": "^15.1.2",
+    "@socketsupply/components": "^14.1.0",
     "@socketsupply/socket": "^0.5.4"
   }
 }

socket.ini

@@ -53,6 +53,38 @@ script = "node build.js"
 DEV = true
 
 
+[build.copy-map]
+;
+; What node modules to allow
+;
+importmap.json = importmap.json
+
+;
+; Application Files
+;
+src/index.html = index.html
+src/index.js = index.js
+src/vm.js = vm.js
+src/preview.js = preview.js
+src/worker.js = worker.js
+src/git-data.js = git-data.js
+src/settings.json = settings.json
+
+src/components = components
+src/views = views
+src/fonts = fonts
+src/lib = lib
+src/pages = pages
+src/css = css
+
+;
+; Node modules
+;
+node_modules/@socketsupply/components = node_modules/@socketsupply/components
+node_modules/@socketsupply/indexed = node_modules/@socketsupply/indexed
+node_modules/@socketsupply/tonic = node_modules/@socketsupply/tonic
+
+
 [build.script]
 ; If true, it will pass build arguments to the build script. WARNING: this could be deprecated in the future.
 ; default value: false
@@ -64,8 +96,9 @@ forward_arguments = false
 ; Could be a string or an array of strings
 sources[] = "src"
 
-
 [webview]
+importmap = "/importmap.json"
+
 ; Make root open index.html
 ; default value: "/"
 root = "/"
@@ -79,7 +112,6 @@ root = "/"
 watch = true
 
 ; Custom headers injected on all webview routes
-[webview]
 ; default value: ""
 ; headers[] = "X-Custom-Header: Some-Value"
 
@@ -99,6 +131,8 @@ $HOST_HOME = /user/home
 allowed[] = "https://*.stripe.com/*"
 allowed[] = "https://stripe.com/*"
 allowed[] = "https://*.stripe.network/*"
+allowed[] = "https://*.stripecdn.com/*"
+allowed[] = "https://newassets.hcaptcha.com/*"
 
 [permissions]
 ; Allow/Disallow fullscreen in application

src/components/editor.js

@@ -2,8 +2,8 @@ import fs from 'socket:fs'
 import path from 'socket:path'
 import { sha256 } from 'socket:network'
 
-import * as monaco from 'monaco-editor'
 import Tonic from '@socketsupply/tonic'
+import { monaco } from '../vendor.js'
 
 function rgbaToHex (rgbaString) {
   const rgbaValues = rgbaString.match(/\d+/g)

src/components/git-status.js

@@ -1,6 +1,7 @@
-import Tonic from '@socketsupply/tonic'
 import { exec } from 'socket:child_process'
 
+import Tonic from '@socketsupply/tonic'
+
 class GitStatus extends Tonic {
   async * render () {
     yield this.html`

src/components/patch-requests.js

@@ -1,8 +1,9 @@
-import Tonic from '@socketsupply/tonic'
 import path from 'socket:path'
 import fs from 'socket:fs'
 import { exec } from 'socket:child_process'
 
+import Tonic from '@socketsupply/tonic'
+
 class PatchRequests extends Tonic {
   async click (e) {
     const el = Tonic.match(e.target, '[data-event]')

src/components/properties.js

@@ -1,6 +1,7 @@
-import Tonic from '@socketsupply/tonic'
 import process from 'socket:process'
 
+import Tonic from '@socketsupply/tonic'
+
 import Config from '../lib/config.js'
 
 class AppProperties extends Tonic {

src/components/terminal.js

@@ -1,7 +1,7 @@
 import Tonic from '@socketsupply/tonic'
-import { Terminal } from 'xterm'
-import { FitAddon as Resizer } from 'xterm-addon-fit'
-import { SearchAddon as Search } from 'xterm-addon-search'
+import { Terminal } from '../vendor.js'
+import { Resizer } from '../vendor.js'
+import { Search } from '../vendor.js'
 
 // const SECOND = 1000
 // const MAX_ROWS = 30 * SECOND

src/css/page-account.css

@@ -10,8 +10,7 @@ body {
   display: flex;
   justify-content: center;
   align-content: center;
-  height: 100vh;
-  width: 100vw;
+  overflow: hidden;
 }
 
 form {
@@ -30,8 +29,10 @@ form {
 
 #card-element {
   padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
+  border: 1px solid var(--tonic-border);
+  border-radius: 4px;
+  width: 100%;
+  height: 42px;
 }
 
 .StripeElement {