npm - effect-start - Versions diffs - 0.12.0 → 0.13.0 - Mend

effect-start 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md +9 -12
package/package.json +2 -1
package/src/NodeUtils.ts +23 -0
package/src/bun/BunTailwindPlugin.ts +93 -94
package/src/x/tailwind/plugin.ts +17 -0

package/README.md CHANGED Viewed

@@ -52,27 +52,24 @@ src/routes
 ### Tailwind CSS Support
-Install Tailwind plugin:
+Effect Start comes with native Tailwind support that is lightweight and
+works with minimal setup.
+First, install Tailwind package:
 ```sh
-bun add tailwindcss bun-plugin-tailwind
+bun add tailwindcss
 ```
-In `bunfig.toml`:
+Then, register a plugin in `bunfig.toml`:
 ```toml
 [serve.static]
-plugins = ["bun-plugin-tailwind"]
+plugins = ["effect-start/x/tailwind/plugin"]
 ```
-Finally, include it in your `src/app.html`:
+Finally, include it in your `src/app.css`:
 ```html
-<!doctype html>
-<html>
-  <head>
-    <link rel="stylesheet" href="tailwindcss" />
-  </head>
-  <!-- the rest of your HTML... -->
-</html>
+@import "tailwindcss";
 ```

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "effect-start",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -16,6 +16,7 @@
     "./jsx-dev-runtime": "./src/jsx-runtime.ts",
     "./hyper": "./src/hyper/index.ts",
     "./x/*": "./src/x/*/index.ts",
+    "./x/tailwind/plugin": "./src/x/tailwind/plugin.ts",
     "./middlewares/BasicAuthMiddleware": "./src/middlewares/BasicAuthMiddleware.ts",
     "./assets.d.ts": "./src/assets.d.ts"
   },

package/src/NodeUtils.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import * as NFS from "node:fs/promises"
+import * as NPath from "node:path"
+export const findClosestPackageJson = async (
+  path: string,
+): Promise<string | undefined> => {
+  const resolved = NPath.resolve(path)
+  const stat = await NFS.stat(resolved).catch(() => undefined)
+  let dir = stat?.isDirectory() ? resolved : NPath.dirname(resolved)
+  const root = NPath.parse(dir).root
+  while (dir !== root) {
+    const candidate = NPath.join(dir, "package.json")
+    try {
+      await NFS.access(candidate)
+      return candidate
+    } catch {
+      dir = NPath.dirname(dir)
+    }
+  }
+  return undefined
+}

package/src/bun/BunTailwindPlugin.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type * as Tailwind from "@tailwindcss/node"
 import type { BunPlugin } from "bun"
-import * as NodePath from "node:path"
+import * as NPath from "node:path"
 type Compiler = Awaited<ReturnType<typeof Tailwind.compile>>
@@ -30,6 +30,7 @@ export const make = (opts: {
    *
    * This option scans the provided path and ensures that class names found under this path
    * are includedd, even if they are not part of the import graph.
+   * Useful when we want to scan clientside code which is not imported directly on serverside.
    */
   scanPath?: string
 } = {}): BunPlugin => {
@@ -65,44 +66,51 @@ export const make = (opts: {
       }
       /**
-       * Track import relationships.
-       * We do this to scope all class name candidates to tailwind entrypoints
+       * Track import relationships when dynamically scanning
+       * from tailwind entrypoints.
+       *
+       * As of Bun 1.3 this pathway break for Bun Full-Stack server.
+       * Better to pass scanPath explicitly.
+       * @see https://github.com/oven-sh/bun/issues/20877
        */
-      builder.onResolve({
-        filter: /.*/,
-      }, (args) => {
-        const fullPath = Bun.resolveSync(args.path, args.resolveDir)
-        if (fullPath.includes("/node_modules/")) {
-          return undefined
-        }
-        /**
-         * Register every visited module.
-         */
-        {
-          if (!importAncestors.has(fullPath)) {
-            importAncestors.set(fullPath, new Set())
+      if (!opts.scanPath) {
+        builder.onResolve({
+          filter: /.*/,
+        }, (args) => {
+          const fullPath = Bun.resolveSync(args.path, args.resolveDir)
+          const importer = args.importer
+          if (fullPath.includes("/node_modules/")) {
+            return undefined
           }
-          if (!importDescendants.has(fullPath)) {
-            importDescendants.set(fullPath, new Set())
-          }
+          /**
+           * Register every visited module.
+           */
+          {
+            if (!importAncestors.has(fullPath)) {
+              importAncestors.set(fullPath, new Set())
+            }
-          if (!importAncestors.has(args.importer)) {
-            importAncestors.set(args.importer, new Set())
-          }
+            if (!importDescendants.has(fullPath)) {
+              importDescendants.set(fullPath, new Set())
+            }
-          if (!importDescendants.has(args.importer)) {
-            importDescendants.set(args.importer, new Set())
+            if (!importAncestors.has(importer)) {
+              importAncestors.set(args.importer, new Set())
+            }
+            if (!importDescendants.has(importer)) {
+              importDescendants.set(importer, new Set())
+            }
           }
-        }
-        importAncestors.get(fullPath)!.add(args.importer)
-        importDescendants.get(args.importer)!.add(fullPath)
+          importAncestors.get(fullPath)!.add(importer)
+          importDescendants.get(importer)!.add(fullPath)
-        return undefined
-      })
+          return undefined
+        })
+      }
       /**
        * Scan for class name candidates in component files.
@@ -133,14 +141,12 @@ export const make = (opts: {
         }
         const compiler = await Tailwind.compile(source, {
-          base: NodePath.dirname(args.path),
+          base: NPath.dirname(args.path),
           shouldRewriteUrls: true,
           onDependency: (path) => {},
         })
         // wait for other files to be loaded so we can collect class name candidates
-        // NOTE: at currently processed css won't be in import graph because
-        // we haven't returned its contents yet.
         await args.defer()
         const candidates = new Set<string>()
@@ -189,81 +195,78 @@ export const make = (opts: {
 }
 const CSS_IMPORT_REGEX = /@import\s+(?:url\()?["']?([^"')]+)["']?\)?\s*[^;]*;/
+const HTML_COMMENT_REGEX = /<!--[\s\S]*?-->/g
+const TEMPLATE_EXPRESSION_REGEX = /\$\{[^}]*\}/g
+const TAILWIND_CLASS_REGEX = /^[a-zA-Z0-9_:-]+(\[[^\]]*\])?$/
+const CLASS_NAME_PATTERNS = [
+  // HTML class attributes with double quotes: <div class="bg-blue-500 text-white">
+  "<[^>]*?\\sclass\\s*=\\s*\"([^\"]+)\"",
-function hasCssImport(css: string, specifier?: string): boolean {
-  const [, importPath] = css.match(CSS_IMPORT_REGEX) ?? []
-  if (!importPath) return false
-  return specifier === undefined
-    || importPath.includes(specifier)
-}
-export function extractClassNames(source: string): Set<string> {
-  const candidates = new Set<string>()
+  // HTML class attributes with single quotes: <div class='bg-blue-500 text-white'>
+  "<[^>]*?\\sclass\\s*=\\s*'([^']+)'",
-  // Remove HTML comments to avoid false matches
-  const sourceWithoutComments = source.replace(/<!--[\s\S]*?-->/g, "")
+  // JSX className attributes with double quotes: <div className="bg-blue-500 text-white">
+  "<[^>]*?\\sclassName\\s*=\\s*\"([^\"]+)\"",
-  // Array of pattern strings for different class/className attribute formats
-  const patterns = [
-    // HTML class attributes with double quotes: <div class="bg-blue-500 text-white">
-    "<[^>]*?\\sclass\\s*=\\s*\"([^\"]+)\"",
+  // JSX className attributes with single quotes: <div className='bg-blue-500 text-white'>
+  "<[^>]*?\\sclassName\\s*=\\s*'([^']+)'",
-    // HTML class attributes with single quotes: <div class='bg-blue-500 text-white'>
-    "<[^>]*?\\sclass\\s*=\\s*'([^']+)'",
+  // JSX className with braces and double quotes: <div className={"bg-blue-500 text-white"}>
+  "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
-    // JSX className attributes with double quotes: <div className="bg-blue-500 text-white">
-    "<[^>]*?\\sclassName\\s*=\\s*\"([^\"]+)\"",
+  // JSX className with braces and single quotes: <div className={'bg-blue-500 text-white'}>
+  "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
-    // JSX className attributes with single quotes: <div className='bg-blue-500 text-white'>
-    "<[^>]*?\\sclassName\\s*=\\s*'([^']+)'",
+  // JSX className with template literals: <div className={`bg-blue-500 ${variable}`}>
+  "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
-    // JSX className with braces and double quotes: <div className={"bg-blue-500 text-white"}>
-    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
+  // HTML class with template literals: <div class={`bg-blue-500 ${variable}`}>
+  "<[^>]*?\\sclass\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
-    // JSX className with braces and single quotes: <div className={'bg-blue-500 text-white'}>
-    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
+  // HTML class at start of tag with double quotes: <div class="bg-blue-500">
+  "<\\w+\\s+class\\s*=\\s*\"([^\"]+)\"",
-    // JSX className with template literals: <div className={`bg-blue-500 ${variable}`}>
-    "<[^>]*?\\sclassName\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+  // HTML class at start of tag with single quotes: <div class='bg-blue-500'>
+  "<\\w+\\s+class\\s*=\\s*'([^']+)'",
-    // HTML class with template literals: <div class={`bg-blue-500 ${variable}`}>
-    "<[^>]*?\\sclass\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+  // JSX className at start of tag with double quotes: <div className="bg-blue-500">
+  "<\\w+\\s+className\\s*=\\s*\"([^\"]+)\"",
-    // HTML class at start of tag with double quotes: <div class="bg-blue-500">
-    "<\\w+\\s+class\\s*=\\s*\"([^\"]+)\"",
+  // JSX className at start of tag with single quotes: <div className='bg-blue-500'>
+  "<\\w+\\s+className\\s*=\\s*'([^']+)'",
-    // HTML class at start of tag with single quotes: <div class='bg-blue-500'>
-    "<\\w+\\s+class\\s*=\\s*'([^']+)'",
+  // JSX className at start with braces and double quotes: <div className={"bg-blue-500"}>
+  "<\\w+\\s+className\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
-    // JSX className at start of tag with double quotes: <div className="bg-blue-500">
-    "<\\w+\\s+className\\s*=\\s*\"([^\"]+)\"",
+  // JSX className at start with braces and single quotes: <div className={'bg-blue-500'}>
+  "<\\w+\\s+className\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
-    // JSX className at start of tag with single quotes: <div className='bg-blue-500'>
-    "<\\w+\\s+className\\s*=\\s*'([^']+)'",
+  // JSX className at start with template literals: <div className={`bg-blue-500 ${variable}`}>
+  "<\\w+\\s+className\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
-    // JSX className at start with braces and double quotes: <div className={"bg-blue-500"}>
-    "<\\w+\\s+className\\s*=\\s*\\{\\s*\"([^\"]+)\"\\s*\\}",
+  // HTML class at start with template literals: <div class={`bg-blue-500 ${variable}`}>
+  "<\\w+\\s+class\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+]
-    // JSX className at start with braces and single quotes: <div className={'bg-blue-500'}>
-    "<\\w+\\s+className\\s*=\\s*\\{\\s*'([^']+)'\\s*\\}",
+const CLASS_NAME_REGEX = new RegExp(
+  CLASS_NAME_PATTERNS.map(pattern => `(?:${pattern})`).join("|"),
+  "g",
+)
-    // JSX className at start with template literals: <div className={`bg-blue-500 ${variable}`}>
-    "<\\w+\\s+className\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
+function hasCssImport(css: string, specifier?: string): boolean {
+  const [, importPath] = css.match(CSS_IMPORT_REGEX) ?? []
-    // HTML class at start with template literals: <div class={`bg-blue-500 ${variable}`}>
-    "<\\w+\\s+class\\s*=\\s*\\{\\s*`([^`]*)`\\s*\\}",
-  ]
+  if (!importPath) return false
-  // Combine all patterns into one regex using alternation
-  const combinedPattern = patterns
-    .map(pattern => `(?:${pattern})`)
-    .join("|")
+  return specifier === undefined
+    || importPath.includes(specifier)
+}
-  const combinedRegex = new RegExp(combinedPattern, "g")
+export function extractClassNames(source: string): Set<string> {
+  const candidates = new Set<string>()
+  const sourceWithoutComments = source.replace(HTML_COMMENT_REGEX, "")
-  for (const match of sourceWithoutComments.matchAll(combinedRegex)) {
+  for (const match of sourceWithoutComments.matchAll(CLASS_NAME_REGEX)) {
     // Find the first non-undefined capture group (skip match[0] which is full match)
     let classString = ""
     for (let i = 1; i < match.length; i++) {
@@ -277,18 +280,14 @@ export function extractClassNames(source: string): Set<string> {
       continue
     }
-    // Only apply complex processing if the string contains characters that require it
     if (classString.includes("${")) {
-      // Split by ${...} expressions and process each static part
-      const staticParts = classString.split(/\$\{[^}]*\}/g)
+      const staticParts = classString.split(TEMPLATE_EXPRESSION_REGEX)
       for (const part of staticParts) {
         const names = part.trim().split(/\s+/).filter(name => {
           if (name.length === 0) return false
-          // Don't extract incomplete classes like "bg-" or "-500"
           if (name.endsWith("-") || name.startsWith("-")) return false
-          // Basic Tailwind class pattern validation
-          return /^[a-zA-Z0-9_:-]+(\[[^\]]*\])?$/.test(name)
+          return TAILWIND_CLASS_REGEX.test(name)
         })
         names.forEach(name => candidates.add(name))
       }

package/src/x/tailwind/plugin.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import * as NPath from "node:path"
+import * as BunTailwindPlugin from "../../bun/BunTailwindPlugin.ts"
+import * as NodeUtils from "../../NodeUtils.ts"
+// Append `?dir=` to module identifier to pass custom directory to scan
+const dirParam = URL.parse(import.meta.url)?.searchParams.get("dir")
+const packageJson = await NodeUtils.findClosestPackageJson(process.cwd())
+const scanPath = dirParam
+  ? NPath.resolve(process.cwd(), dirParam)
+  : packageJson
+  ? NPath.dirname(packageJson)
+  : process.cwd()
+// Export as default to be used in bunfig.toml
+export default BunTailwindPlugin.make({
+  scanPath,
+})