Original(japanese) https://zenn.dev/mizchi/articles/standalone-html-frontend
Mostly translated by deepl
Note: Do not use in production, tailwind is running in CDN mode and esm.sh builds scripts dynamically, so performance is not good.
Original(japanese) https://zenn.dev/mizchi/articles/standalone-html-frontend
Mostly translated by deepl
Note: Do not use in production, tailwind is running in CDN mode and esm.sh builds scripts dynamically, so performance is not good.
import React from "react"; | |
import ReactDOM from "react-dom"; | |
import { ChakraProvider, DarkMode, Button, LightMode } from "@chakra-ui/react"; | |
import type { ApplicationProps } from "../../shell/src/types"; | |
import { CacheProvider } from "@emotion/react"; | |
import createCache from "@emotion/cache"; | |
function Root(props: ApplicationProps) { | |
return ( | |
<> |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
<style type="text/tailwindcss"> | |
@tailwind base; |
import ts, { factory } from "typescript"; | |
export function transformerFactory(context: ts.TransformationContext) { | |
function visitNode(node: ts.Node): ts.Node { | |
const newNode = ts.visitEachChild(node, visitNode, context); | |
if ( | |
ts.isJsxOpeningElement(newNode) || | |
ts.isJsxSelfClosingElement(newNode) | |
) { | |
return appendSourceMapAttribute(newNode.getSourceFile(), newNode); |
import { test, expect } from 'vitest'; | |
import { build, splitVendorChunkPlugin } from 'vite'; | |
import path from 'path'; | |
import { OutputAsset, OutputBundle, OutputChunk, RollupOutput } from 'rollup'; | |
import ts from 'typescript'; | |
const root = path.join(__dirname, "__fixtures") | |
test("nested", async () => { | |
const a = 'export default Math.random()'; |
import {test, expect} from 'vitest'; | |
test("nested", async () => { | |
const a = 'export default Math.random()'; | |
const b = `export default () => import('data:text/javascript;base64,${btoa(a)}')`; | |
const bmod = await import(`data:text/javascript;base64,${btoa(b)}`); | |
const amod = await import(`data:text/javascript;base64,${btoa(a)}`); | |
expect(await bmod.default()).not.toBe(await amod.default); | |
}); |
/* | |
Grid css layout utilities for [x, y, w, h] grid areas. | |
Example: | |
export default function App() { | |
return ( | |
<> | |
<Grid | |
rows={["32px", "1fr", "1fr", "1fr", "1fr"]} |
#!/usr/bin/env -S deno run -A | |
/* | |
$ edit ~/bin/cmd | |
$ chmod +x ~/bin/cmd | |
$ cmd -f | |
# Run | |
$ ls -al | |
total 24 | |
drwxr-xr-x 10 kotaro.chikuba staff 320 Sep 22 20:16 . | |
drwxr-xr-x 9 kotaro.chikuba staff 288 Sep 22 20:01 .git |