+ The smallest, fastest, most feature complete tailwind-in-js solution in
+ existence.
+
+
+
+
diff --git a/sites/twind.run/src/lib/templates/preset-radix-ui/index.ts b/sites/twind.run/src/lib/templates/preset-radix-ui/index.ts
new file mode 100644
index 000000000..151caff22
--- /dev/null
+++ b/sites/twind.run/src/lib/templates/preset-radix-ui/index.ts
@@ -0,0 +1,12 @@
+import type { Workspace } from "$lib/types"
+
+import config from "./config.tpl?raw"
+import html from "./html.tpl?raw"
+import script from "./script.tpl?raw"
+
+export const workspace: Workspace = {
+ version: "*",
+ html: { path: "index.html", value: html },
+ script: { path: "index.ts", value: script },
+ config: { path: "twind.config.ts", value: config },
+}
diff --git a/sites/twind.run/src/lib/templates/preset-radix-ui/script.tpl b/sites/twind.run/src/lib/templates/preset-radix-ui/script.tpl
new file mode 100644
index 000000000..a14c7f343
--- /dev/null
+++ b/sites/twind.run/src/lib/templates/preset-radix-ui/script.tpl
@@ -0,0 +1,15 @@
+import { tw, cx, tx, css, style } from "@twind/core"
+
+// imported and executed once after the tw instance has been created but before new document.body is set
+
+export async function beforeUpdate() {
+ // runs every time before a new document.body is set
+}
+
+export async function afterUpdate() {
+ // runs every time after a new document.body is set
+}
+
+export async function dispose() {
+ // runs before a new script is activated
+}
diff --git a/sites/twind.run/src/lib/transpile.api.ts b/sites/twind.run/src/lib/transpile.api.ts
index 1e6195b07..2767e43be 100644
--- a/sites/twind.run/src/lib/transpile.api.ts
+++ b/sites/twind.run/src/lib/transpile.api.ts
@@ -92,16 +92,7 @@ const api: Transpile = {
(!input.version || SemverRange.match(input.version, output.version))
) {
source = output.id + output.path
- }
- }
-
- for (const [key, value] of Object.entries(manifest.imports || {})) {
- // add all sub-path imports
- if (
- key === source ||
- (key.startsWith(source + '/') && key !== source + '/package.json')
- ) {
- ;(inputMap.imports ||= {})[key] = value
+ ;(inputMap.imports ||= {})[source] = resolved
}
}
@@ -121,10 +112,11 @@ const api: Transpile = {
],
})
+ // console.debug({ manifest, dependencies, inputMap })
+
const generator = new Generator({
baseUrl: 'memory://',
inputMap,
- defaultProvider: 'jspm.system',
env: [
'development',
'modern',
@@ -135,9 +127,49 @@ const api: Transpile = {
'import',
'default',
],
+ defaultProvider: 'jspm.system',
+ providers: {
+ '@twind': 'local',
+ },
+ customProviders: {
+ local: {
+ pkgToUrl(pkg) {
+ if (manifest.packages[pkg.name] === pkg.version) {
+ return new URL(`./immutable/cdn/${pkg.name}@${pkg.version}/`, manifest.url)
+ .href as 'x/'
+ }
+
+ return `https://ga.system.jspm.io/${pkg.registry}:${pkg.name}@${pkg.version}/`
+ },
+ parseUrlPkg(url) {
+ const base = new URL(`./immutable/cdn/`, manifest.url).href
+ if (url.startsWith(base)) {
+ const [, name, version] =
+ url
+ .slice(base.length)
+ .match(/^((?:@[^/\\%@]+\/)?[^./\\%@][^/\\%@]*)@([^\/]+)(\/.*)?$/) || []
+
+ return { registry: 'npm', name, version }
+ }
+ },
+ async resolveLatestTarget(target, layer, parentUrl) {
+ const version = manifest.packages[target.name]
+
+ if (version) {
+ return { registry: target.registry, name: target.name, version }
+ }
+
+ return null
+ },
+ },
+ },
})
- // TODO: trace generator.logStream
+ // ;(async () => {
+ // for await (const { type, message } of generator.logStream()) {
+ // console.log(`${type}: ${message}`);
+ // }
+ // })();
const [{ dynamicDeps = [], staticDeps = [] } = {}, { output }] = await Promise.all([
generator.install([...dependencies]),
@@ -194,7 +226,7 @@ const api: Transpile = {
prefetch: dynamicDeps.map(scopeToManifest),
}
- console.debug('importMap', importMap)
+ // console.debug('importMap', importMap)
return {
...Object.fromEntries(
output
diff --git a/sites/twind.run/src/routes/[[key]]/+page.server.ts b/sites/twind.run/src/routes/[[key]]/+page.server.ts
index 2398c9d5d..99b675b0b 100644
--- a/sites/twind.run/src/routes/[[key]]/+page.server.ts
+++ b/sites/twind.run/src/routes/[[key]]/+page.server.ts
@@ -200,11 +200,11 @@ export async function load({
const alias = version === '*' ? 'latest' : version.toLowerCase().replace(/[^a-z\d]/g, '-')
const origin =
- version === SITE_VERSION
+ !(dev && version === SITE_VERSION) || alias.includes('-dev-')
? new URL(request.url).origin
: alias === 'latest'
? `https://${HOSTNAME}`
- : `https://${/^\d\.\d\.\d/.test(alias) ? 'v' + alias : alias}.${HOSTNAME}`
+ : `https://${/\d/.test(alias) ? 'v' + alias : alias}.${HOSTNAME}`
const url = origin + MANIFEST_PATH
@@ -220,7 +220,7 @@ export async function load({
response = await fetch(url)
if (!(response.ok && response.status === 200)) {
- throw new Error(`[${response.status}] ${response.statusText || 'request failed'}`)
+ throw new Error(`[${response.status}] ${response.statusText || 'request failed'}: ${url}`)
}
cache?.put(url, response.clone())
diff --git a/sites/twind.run/src/routes/[[key]]/+page.svelte b/sites/twind.run/src/routes/[[key]]/+page.svelte
index b9df1b296..87761b35c 100644
--- a/sites/twind.run/src/routes/[[key]]/+page.svelte
+++ b/sites/twind.run/src/routes/[[key]]/+page.svelte
@@ -8,7 +8,6 @@
import copy from 'clipboard-copy'
import { Pane, Splitpanes } from 'svelte-splitpanes'
import {
- Transition,
Listbox,
ListboxLabel,
ListboxButton,
@@ -34,7 +33,6 @@
CheckSolid,
ChevronUpDownMini,
EllipsisHorizontalMini,
- Link16,
LoadingSpin,
ShareAndroid24,
Stars,
@@ -422,7 +420,6 @@
class="relative group max-w-([6rem] lg:[12rem] xl:fit)"
value={$workspace.version}
on:change={(event) => ($workspace.version = event.detail)}
- let:open
>
Change selected version
@@ -440,64 +437,56 @@
-
-
- {#each data.manifests as manifest (manifest.version)}
-
- cx(
- 'cursor-default select-none p-2 text-sm',
- active
- ? 'text-brand-12 bg-brand-4'
- : selected
- ? 'text-accent-11 bg-brand-3'
- : 'text-brand-11 bg-brand-3',
- )}
- let:active
- let:selected
- >
-
-
-
- v{manifest.version}
-
- {#if selected}
-
- {/if}
-
-
- {#if manifest.pr}
-
- PR #{manifest.pr}
- β still in development
- {:else if manifest['dist-tag'] === 'latest'}
- stable version β for most users
- {:else if manifest['dist-tag'] === 'next'}
- next version β for early adopters
- {:else}
- canary version β still in development
- {/if}
+ {#each data.manifests as manifest (manifest.version)}
+
+ cx(
+ 'cursor-default select-none p-2 text-sm',
+ active
+ ? 'text-brand-12 bg-brand-4'
+ : selected
+ ? 'text-accent-11 bg-brand-3'
+ : 'text-brand-11 bg-brand-3',
+ )}
+ let:active
+ let:selected
+ >
+
+
+
+ v{manifest.version}
+ {#if selected}
+
+ {/if}
-
- {/each}
-
-
+
+ {#if manifest.pr}
+
+ PR #{manifest.pr}
+ β still in development
+ {:else if manifest['dist-tag'] === 'latest'}
+ stable version β for most users
+ {:else if manifest['dist-tag'] === 'next'}
+ next version β for early adopters
+ {:else}
+ canary version β still in development
+ {/if}
+
+
+