create: update twind to 1.0

[deckchairlabs]

We need to update the create script to use the new twind 1.0 release

[cdoremus]

I'm working on a blog post about Ultra with an example app based on the current create script and here's my guide how to upgrade what the create script produces when twind is selected to twind 1.0:

Upgrading to twind 1.0 from 0.16.17

importMap.json

• replace the twind imports with:

  "@twind/core": "https://esm.sh/@twind/core@1.0.1",
  "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.1",
  "@twind/preset-tailwind": "https://esm.sh/*@twind/preset-tailwind@1.0.1",

  src/twind/twind.ts

• replace all content with:

  
  // @see https://twind.style/library-mode
  import {
  cssom,
  injectGlobal as injectGlobal$,
  keyframes as keyframes$,
  stringify as stringify$,
  twind,
  tx as tx$,
  virtual,
  } from "@twind/core";
  import config from "./twind.config.js";

const styleElementId = "__twind";

export const sheet = typeof Deno === "undefined" ? cssom(style#${styleElementId}) : virtual();

export const stringify = (target: unknown) => <style id="${styleElementId}">${stringify$(target)}</style>;

//@ts-ignore twind type issue export const tw = twind( config, sheet, );

export const tx = tx$.bind(tw); export const injectGlobal = injectGlobal$.bind(tw); export const keyframes = keyframes$.bind(tw);

## src/twind/TwindProvider.tsx

- delete this file

## src/twind/twind.config.js

- create this file and add the following content:
```js
import { defineConfig } from "@twind/core";
import presetAutoprefix from "@twind/preset-autoprefix";
import presetTailwind from "@twind/preset-tailwind";

export default defineConfig({
  theme: {
  // add theme styles here
  },
  presets: [presetAutoprefix(), presetTailwind()],
});

client.tsx

• remove twind.ts import

server.tsx

• remove twind.ts import

• add the following imports

  import { createHeadInsertionTransformStream } from "ultra/stream.ts";
  import { stringify, tw } from "./src/twind/twind.ts";

• in server.get() replace context.body return with:

  // Inject the style tag into the head of the streamed response
  const stylesInject = createHeadInsertionTransformStream(() => {
  if (Array.isArray(tw.target)) {
    return Promise.resolve(stringify(tw.target));
  }
  
  throw new Error("Expected tw.target to be an instance of an Array");
  });
  
  const transformed = result.pipeThrough(stylesInject);
  
  return context.body(transformed, 200, {
  "content-type": "text/html; charset=utf-8",
  });

app.tsx

• replace tw and TwindProvider imports with:

  import  { tw } from "./twind/twind.ts";

• remove <TwindProvider> and </TwindProvider> tags

• change h1 element's className to use tw function call:

  <h1 className={tw(`text-8xl font-mono margin mb-8`)}>

Any file that uses twind/tailwind styles:

• replace tw import with:

  import  { tw } from "../twind/twind.ts"; // path may differ

• Use the function call when using tw like here:

  <div className={tw(`text-xl bold`)} >

[M1racle04]

hii can i work on this?

[deckchairlabs]

hii can i work on this?

Please do!

[cdoremus]

Yes, do it! I don't have time right now myself.

[M1racle04]

Created couple of prs, please check

[cdoremus]

This issue deals with updating the create.ts script used to initialize a new Ultra project. The notes I put above are changes that need to be made inside the lib/create folder.