Fixes to allow fresh servers

crates/sb_core/file_fetcher.rs

@@ -78,9 +78,14 @@ fn fetch_local(specifier: &ModuleSpecifier) -> Result<File, AnyError> {
         .map_err(|_| uri_error(format!("Invalid file path.\n  Specifier: {specifier}")))?;
     let bytes = fs::read(local)?;
     let charset = text_encoding::detect_charset(&bytes).to_string();
-    let source = get_source_from_bytes(bytes, Some(charset))?;
+    // TODO (mcandeia) inject jsx import source when tsx is being fetched.
+    let jsx_import_source = "/** @jsxImportSource preact */".to_string();
+    let _source = get_source_from_bytes(bytes, Some(charset))?;
     let media_type = MediaType::from_specifier(specifier);
-
+    let source = match media_type {
+        MediaType::Tsx => format!("{}\n{}", jsx_import_source, _source),
+        _ => _source,
+    };
     Ok(File {
         maybe_types: None,
         media_type,
@@ -209,14 +214,16 @@ impl FileFetcher {
     ) -> Result<File, AnyError> {
         let maybe_content_type = headers.get("content-type");
         let (media_type, maybe_charset) = map_content_type(specifier, maybe_content_type);
-        let source = get_source_from_bytes(bytes, maybe_charset)?;
-        let maybe_types = match media_type {
+        let _source = get_source_from_bytes(bytes, maybe_charset)?;
+        let jsx_import_source = "/** @jsxImportSource preact */".to_string();
+        // TODO (mcandeia) inject jsxImportSource when tsx is enabled
+        let (maybe_types, source) = match media_type {
             MediaType::JavaScript | MediaType::Cjs | MediaType::Mjs | MediaType::Jsx => {
-                headers.get("x-typescript-types").cloned()
+                (headers.get("x-typescript-types").cloned(), _source)
             }
-            _ => None,
+            MediaType::Tsx => (None, format!("{}\n{}", jsx_import_source, _source)),
+            _ => (None, _source),
         };
-
         Ok(File {
             maybe_types,
             media_type,

crates/sb_core/js/bootstrap.js

@@ -450,7 +450,7 @@ globalThis.bootstrapSBEdge = opts => {
 		const allowedFs = ['cwd', 'readFile', 'readFileSync', 'readTextFile', 'readTextFileSync'];
 
 		// remove all fs APIs except Deno.cwd
-		deleteDenoApis(Object.keys(fsVars).filter((k) => !allowedFs.includes(k)));
+		// deleteDenoApis(Object.keys(fsVars).filter((k) => !allowedFs.includes(k)));
 	}
 
 	if (isEventsWorker) {

crates/sb_core/js/permissions.js

@@ -102,9 +102,8 @@ class PermissionStatus extends EventTarget {
     }
 
     [SymbolFor("Deno.privateCustomInspect")](inspect) {
-        return `${this.constructor.name} ${
-            inspect({ state: this.state, onchange: this.onchange })
-        }`;
+        return `${this.constructor.name} ${inspect({ state: this.state, onchange: this.onchange })
+            }`;
     }
 }
 
@@ -195,6 +194,9 @@ class Permissions {
         }
 
         formDescriptor(desc);
+        if (desc.name === "run") {
+            return cache(desc, "prompt");
+        }
 
         const state = opQuery(desc);
         return cache(desc, state);
@@ -251,7 +253,7 @@ function serializePermissions(permissions) {
         const serializedPermissions = {};
         for (
             const key of new SafeArrayIterator(["read", "write", "run", "ffi"])
-            ) {
+        ) {
             if (ArrayIsArray(permissions[key])) {
                 serializedPermissions[key] = ArrayPrototypeMap(
                     permissions[key],
@@ -263,7 +265,7 @@ function serializePermissions(permissions) {
         }
         for (
             const key of new SafeArrayIterator(["env", "hrtime", "net", "sys"])
-            ) {
+        ) {
             if (ArrayIsArray(permissions[key])) {
                 serializedPermissions[key] = ArrayPrototypeSlice(permissions[key]);
             } else {

examples/deco/README.md

@@ -0,0 +1,25 @@
+# Deco Start — deco.cx template
+
+Welcome to your [deco.cx](https://deco.cx) site!
+
+This repository was created for you when you created a new site. To edit the
+code of the components in this site, you may clone this repo and run the project
+locally.
+
+---
+
+NOTE: To edit or create new pages with existing components, you don't need to
+edit the code! Just go to any page and hit `.` to open the editor of
+the current page you're seeing.
+
+---
+## Usage
+
+Start the project:
+
+```sh
+deno task start
+```
+
+Navigate to `https://localhost:8000` to see your site and start creating new
+components.

examples/deco/apps/decohub.ts

@@ -0,0 +1 @@
+export { default, Preview } from "apps/decohub/mod.ts";

examples/deco/apps/site.ts

@@ -0,0 +1,23 @@
+import { App, AppContext as AC } from "deco/mod.ts";
+import website, { Props } from "apps/website/mod.ts";
+
+import manifest, { Manifest } from "../manifest.gen.ts";
+
+type WebsiteApp = ReturnType<typeof website>;
+export default function Site(
+  state: Props,
+): App<Manifest, Props, [
+  WebsiteApp,
+]> {
+  return {
+    state,
+    manifest,
+    dependencies: [
+      website(state),
+    ],
+  };
+}
+
+export type SiteApp = ReturnType<typeof Site>;
+export type AppContext = AC<SiteApp>;
+export { onBeforeResolveProps } from "apps/website/mod.ts";

examples/deco/components/ui/Icon.tsx

@@ -0,0 +1,64 @@
+import { asset } from "$fresh/runtime.ts";
+import type { JSX } from "preact";
+
+export type AvailableIcons =
+  | "ChevronLeft"
+  | "ChevronRight"
+  | "ChevronUp"
+  | "ChevronDown"
+  | "QuestionMarkCircle"
+  | "User"
+  | "ShoppingCart"
+  | "Bars3"
+  | "Heart"
+  | "MagnifyingGlass"
+  | "XMark"
+  | "Plus"
+  | "Minus"
+  | "MapPin"
+  | "Phone"
+  | "Elo"
+  | "Mastercard"
+  | "Visa"
+  | "Pix"
+  | "Logo"
+  | "Facebook"
+  | "Instagram"
+  | "Tiktok"
+  | "Truck"
+  | "Discount"
+  | "Return"
+  | "CreditCard"
+  | "Deco"
+  | "Discord"
+  | "Trash"
+  | "FilterList"
+  | "WhatsApp"
+  | "ArrowsPointingOut";
+
+interface Props extends JSX.SVGAttributes<SVGSVGElement> {
+  /**
+   * Symbol id from element to render. Take a look at `/static/icons.svg`.
+   *
+   * Example: <Icon id="Bell" />
+   */
+  id: AvailableIcons;
+  size?: number;
+}
+
+function Icon(
+  { id, strokeWidth = 16, size, width, height, ...otherProps }: Props,
+) {
+  return (
+    <svg
+      {...otherProps}
+      width={width ?? size}
+      height={height ?? size}
+      strokeWidth={strokeWidth}
+    >
+      <use href={asset(`/sprites.svg#${id}`)} />
+    </svg>
+  );
+}
+
+export default Icon;

examples/deco/deno.json

@@ -0,0 +1,55 @@
+{
+  "imports": {
+    "$store/": "./",
+    "deco/": "https://denopkg.com/deco-cx/[email protected]/",
+    "apps/": "https://denopkg.com/deco-cx/[email protected]/",
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "std/": "https://deno.land/[email protected]/",
+    "partytown/": "https://denopkg.com/deco-cx/[email protected]/",
+    "daisyui": "npm:[email protected]"
+  },
+  "tasks": {
+    "start": "deno task bundle && deno run -A --unstable --watch=tailwind.css,sections/,functions/,loaders/,actions/,workflows/,accounts/,.env dev.ts",
+    "gen": "deno run -A dev.ts --gen-only",
+    "play": "USE_LOCAL_STORAGE_ONLY=true deno task start",
+    "component": "deno eval 'import \"deco/scripts/component.ts\"'",
+    "release": "deno eval 'import \"deco/scripts/release.ts\"'",
+    "update": "deno run -Ar https://deco.cx/update",
+    "check": "deno fmt && deno lint && deno check dev.ts main.ts",
+    "install": "deno eval 'import \"deco/scripts/apps/install.ts\"'",
+    "uninstall": "deno eval 'import \"deco/scripts/apps/uninstall.ts\"'",
+    "bundle": "deno eval 'import \"deco/scripts/apps/bundle.ts\"' deco-sites/start",
+    "cache_clean": "rm deno.lock; deno cache -r main.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
+  },
+  "githooks": {
+    "pre-commit": "check"
+  },
+  "exclude": [
+    "node_modules",
+    "static/",
+    "README.md",
+    "_fresh",
+    "**/_fresh/*"
+  ],
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "nodeModulesDir": true,
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "experimentalDecorators": true
+  }
+}