feat: twind/shim ssr with support for wmr (#48)

* feat: twind/shim ssr with support for wmr
* test: adjust for new presedence
* doc: wmr example with prerender

.github/workflows/main.yml → .github/workflows/ci.yml

@@ -1,14 +1,15 @@
 name: CI
+
 on: [push]
+
 jobs:
   build:
     name: Node ${{ matrix.node }} on ${{ matrix.os }}
-
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         node: ['10.x', '12.x', '14.x']
-        os: [ubuntu-18.04, macos-10.15, windows-2019]
+        os: [ubuntu-20.04, macos-10.15, windows-2019]
 
     steps:
       - name: Checkout 🛎️
@@ -41,9 +42,10 @@ jobs:
           flag-name: build-${{ matrix.node }}-${{ matrix.os }}
           parallel: true
 
-  finish:
+  coveralls:
+    name: Collect Coverage
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Coveralls Finished
         uses: coverallsapp/github-action@master

.github/workflows/publish-pr.yml

@@ -0,0 +1,83 @@
+name: Publish PR
+
+on: [pull_request]
+
+jobs:
+  publish:
+    name: Publish to Github Packages
+    runs-on: ubuntu-20.04
+    env:
+      NPM_PACKAGE_NAME: twind
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2
+
+      - name: Use Node v14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14'
+
+      - name: Install 🔧
+        uses: bahmutov/npm-install@v1
+
+      - name: Build
+        run: yarn run build
+
+      - uses: actions/setup-node@v1
+        with:
+          registry-url: 'https://npm.pkg.github.com'
+
+      - name: Publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          sed -i -r 's|("name": ")[^"]+(")|\1@${{ github.repository }}\2|;s|("version": ")[^"]+(")|\10.${{ github.event.number }}.${{ github.run_number }}\2|' dist/package.json
+
+          echo '# THIS IS THE [PR ${{ github.event.number }}](${{ github.event.pull_request.html_url }}) PREVIEW PACKAGE' > dist/README.md
+          echo "" >> dist/README.md
+          echo '> Official releases are _only_ available on [registry.npmjs.org](https://www.npmjs.com/package/${{ env.NPM_PACKAGE_NAME }}) as `${{ env.NPM_PACKAGE_NAME }}`.' >> dist/README.md
+          echo "" >> dist/README.md
+          echo "---" >> dist/README.md
+          echo "" >> dist/README.md
+          cat README.md >> dist/README.md
+
+          npm publish --tag "pr${{ github.event.number }}" --access public dist
+
+      - name: Comment
+        uses: mshick/add-pr-comment@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          repo-token-user-login: 'github-actions[bot]' # The user.login for temporary GitHub tokens
+          allow-repeats: false # This is the default
+          message: |
+            ## Try the Preview Package
+
+            > Official releases are **only** available on [registry.npmjs.org](https://www.npmjs.com/package/${{ env.NPM_PACKAGE_NAME }}) as `${{ env.NPM_PACKAGE_NAME }}`.
+
+            This PR has been published to [npm.pkg.github.com](https://github.com/orgs/${{ github.repository_owner }}/packages?repo_name=${{ env.NPM_PACKAGE_NAME }}) as `@${{ github.repository }}@pr${{ github.event.number }}`.
+
+            **Install/Update**
+
+            <details><summary>Configure your NPM client (click to expand)</summary>
+
+            Adjust you `.npmrc` to use `https://npm.pkg.github.com` for `@${{ github.repository_owner }}`
+
+            ```
+            @${{ github.repository_owner }}:registry=https://npm.pkg.github.com
+            ```
+
+            Using the command line:
+
+            ```sh
+            npm config set @${{ github.repository_owner }}:registry https://npm.pkg.github.com --global
+            ```
+
+            </details>
+
+            ```sh
+            # For npm
+            npm install --force ${{ env.NPM_PACKAGE_NAME }}@npm:@${{ github.repository }}@pr${{ github.event.number }}
+
+            # For yarn - upgrade implies install
+            yarn upgrade ${{ env.NPM_PACKAGE_NAME }}@npm:@${{ github.repository }}@pr${{ github.event.number }}
+            ```

.github/workflows/size.yml

@@ -1,5 +1,7 @@
-name: size
+name: Size Limit
+
 on: [pull_request]
+
 jobs:
   size:
     runs-on: ubuntu-20.04

.github/workflows/website.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   build-and-deploy:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2

docs/ssr.md

@@ -254,17 +254,20 @@ async function ssr() {
 > The [tw-in-js/example-wmr](https://github.com/tw-in-js/example-wmr) repository uses this setup.
 
 ```js
-/* pages/twind.config.js */
+/* public/twind.config.js */
 export default {
   /* Shared config */
 }
 ```
 
 ```js
-/* pages/index.js */
+/* public/index.js */
 import hydrate from 'preact-iso/hydrate'
 
 import { setup } from 'twind'
+// Or if you are using twind/shim
+// import { setup } from 'twind/shim'
+
 import twindConfig from './twind.config'
 
 if (typeof window !== 'undefined') {
@@ -278,39 +281,42 @@ export function App() {
 hydrate(<App />)
 
 export async function prerender(data) {
-  const { default: prerender } = await import('preact-iso/prerender')
-
-  const { sheet, getStyleTagProperties } = await import('./twind.prerender')
-
-  sheet.reset()
-
-  const result = await prerender(<App {...data} />)
-
-  const { id, textContent } = getStyleTagProperties(sheet)
-
-  result.html = `<style id="${id}">${textContent}</style>${result.html}`
+  const { default: prerender } = await import('./prerender')
 
-  return result
+  return prerender(<App {...data} />)
+  // Or if you are using twind/shim
+  // return prerender(<App {...data} />, { shim: true })
 }
 ```
 
 ```js
-/* pages/twind.prerender.js */
-import { setup } from 'twind'
+/* public/prerender.js */
+import prerender from 'preact-iso/prerender'
 
-// twind/server has currently only a CJS bundle
-// which available as the default export
-import twind from 'twind/server'
+import { setup } from 'twind'
+import { asyncVirtualSheet, getStyleTagProperties, shim } from 'twind/server'
 
 import twindConfig from './twind.config'
 
-const { asyncVirtualSheet, getStyleTagProperties } = twind
-
 const sheet = asyncVirtualSheet()
 
 setup({ ...twindConfig, sheet })
 
-export { sheet, getStyleTagProperties }
+export default async (app, options = {}) => {
+  sheet.reset()
+
+  const result = await prerender(app)
+
+  if (options.shim) {
+    result.html = shim(result.html)
+  }
+
+  const { id, textContent } = getStyleTagProperties(sheet)
+
+  result.html = `<style id="${id}">${textContent}</style>${result.html}`
+
+  return result
+}
 ```
 
 ## Next.js

example/snowpack.config.js

@@ -8,7 +8,14 @@ module.exports = {
   },
   install: ['uvu', 'uvu/assert', 'snoop'],
   installOptions: {
-    externalPackage: ['dlv', 'tailwindcss', 'jsdom', 'async_hooks'],
+    externalPackage: [
+      'dlv',
+      'tailwindcss',
+      'jsdom',
+      'node-html-parser',
+      'async_hooks',
+      'node:async_hooks',
+    ],
   },
   experiments: {
     routes: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twind",
-  "version": "0.10.3",
+  "version": "0.10.4-0",
   "description": "compiles tailwind like shorthand syntax into css at runtime",
   "// mark as private to prevent accidental publish - use 'yarn release'": "",
   "private": true,
@@ -17,9 +17,12 @@
     "Luke Jackson (lukejacksonn.github.io)",
     "Sascha Tandel (https://github.com/sastan)"
   ],
+  "engines": {
+    "node": ">=10.13"
+  },
   "// The 'module', 'unpkg' and 'types' fields are added by distilt": "",
   "main": "src/index.ts",
-  "// Each entry is expanded twith several bundles (node, script, types and default)": "",
+  "// Each entry is expanded into several bundles (module, script, types, require, node, and default)": "",
   "exports": {
     ".": "./src/index.ts",
     "./colors": "./src/colors/index.ts",
@@ -34,10 +37,60 @@
   "sideEffects": [
     "./shim/shim.js"
   ],
+  "size-limit": [
+    {
+      "path": "dist/twind.js",
+      "gzip": true,
+      "limit": "11.5kb"
+    }
+  ],
   "// These are ONLY bundled (eg included) in the umd builds": "",
   "bundledDependencies": [
     "style-vendorizer"
   ],
+  "dependencies": {
+    "csstype": "^3.0.5",
+    "node-html-parser": "^2.0.1",
+    "style-vendorizer": "^2.0.0"
+  },
+  "peerDependencies": {
+    "typescript": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@size-limit/file": "^4.9.1",
+    "@types/jsdom": "^16.2.5",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
+    "c8": "^7.3.5",
+    "distilt": "^0.9.0",
+    "dlv": "^1.1.3",
+    "doctoc": "^2.0.0",
+    "esbuild": "^0.8.23",
+    "esbuild-register": "^1.1.1",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.2.0",
+    "esm": "^3.2.25",
+    "execa": "^5.0.0",
+    "jsdom": "^16.4.0",
+    "prettier": "^2.0.5",
+    "size-limit": "^4.9.1",
+    "snoop": "^1.0.2",
+    "snowpack": "^2.18.2",
+    "tailwindcss": "^2.0.1",
+    "typescript": "^4.1.3",
+    "uvu": "^0.5.1",
+    "watchlist": "^0.2.3"
+  },
+  "// Tailwind requires Node v12, we support v10 => mark it as optional": "",
+  "optionalDependencies": {
+    "tailwindcss": "^2.0.1"
+  },
   "scripts": {
     "build": "distilt",
     "preformat": "doctoc --update-only --notitle --maxlevel 3 docs/*.md",
@@ -98,61 +151,5 @@
         ]
       }
     ]
-  },
-  "dependencies": {
-    "csstype": "^3.0.5",
-    "style-vendorizer": "^2.0.0"
-  },
-  "peerDependencies": {
-    "typescript": "^4.1.0"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@size-limit/file": "^4.9.1",
-    "@types/jsdom": "^16.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
-    "c8": "^7.3.5",
-    "distilt": "^0.8.1",
-    "dlv": "^1.1.3",
-    "doctoc": "^2.0.0",
-    "esbuild": "^0.8.23",
-    "esbuild-register": "^1.1.1",
-    "eslint": "^7.15.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.2.0",
-    "esm": "^3.2.25",
-    "execa": "^5.0.0",
-    "jsdom": "^16.4.0",
-    "prettier": "^2.0.5",
-    "size-limit": "^4.9.1",
-    "snoop": "^1.0.2",
-    "snowpack": "^2.18.2",
-    "tailwindcss": "^2.0.1",
-    "typescript": "^4.1.3",
-    "uvu": "^0.5.1",
-    "watchlist": "^0.2.3"
-  },
-  "// Tailwind requires Node v12, we support v10 => mark it as optional": "",
-  "optionalDependencies": {
-    "tailwindcss": "^2.0.1"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.com/"
-  },
-  "engines": {
-    "node": ">=10.13"
-  },
-  "size-limit": [
-    {
-      "path": "dist/twind.js",
-      "gzip": true,
-      "limit": "11.5kb"
-    }
-  ]
+  }
 }