feat(tailwindcss-utopia-playground): add tailwinplay like editor with utopia plugin support

Author: craxrev

apps/playground/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/playground/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/playground/app/_components/editor.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+/*
+const mockModule = { hello: 'world' };
+const require = (moduleName) => {
+  if (moduleName === 'mock-module') return mockModule;
+  throw new Error(`Module '${moduleName}' not found`);
+};
+
+const someVariable = 42;
+
+import tailwindcssUtopia from "https://esm.sh/tailwindcss-utopia@0.0.3";
+
+@type {import('tailwindcss').Config}
+
+export default {
+  tailwindcssUtopia,
+  someVariable,
+  mockModule: require('mock-module'),
+};
+
+*/
+
+import { useEffect, useRef, useState } from "react";
+import * as monaco from "monaco-editor";
+import { Editor as MonacoEditor, loader } from "@monaco-editor/react";
+import {
+  configureMonacoTailwindcss,
+  MonacoTailwindcss,
+  TailwindConfig,
+  tailwindcssData,
+} from "monaco-tailwindcss";
+import { css, generateSrcDoc, html, js } from "@/lib/utils";
+
+type Refs = Parameters<
+  NonNullable<React.ComponentProps<typeof MonacoEditor>["onMount"]>
+>;
+type EditorRef = Refs[0];
+type MonacoEditorRef = Refs[1];
+
+loader.config({ monaco });
+
+export default function Editor({
+  activeTab,
+  onChange,
+}: {
+  activeTab: "html" | "css" | "config";
+  onChange: (content: string) => void;
+}) {
+  const editorRef = useRef<EditorRef | null>(null);
+  const monacoEditorRef = useRef<MonacoEditorRef | null>(null);
+
+  const [tabs] = useState(() => ({
+    html: monaco.editor.createModel(
+      html`<h1>Heading H1</h1>
+<h2>Heading H2</h2>
+<h3>Heading H3</h3>
+<h4>Heading H4</h4>
+<h5>Heading H5</h5>
+<h6>Heading H6</h6>
+`,
+      "html",
+    ),
+    css: monaco.editor.createModel(
+      css`@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-bold;
+}
+
+h1 {
+  @apply ~text-x5;
+}
+
+h2 {
+  @apply ~text-x4;
+}
+
+h3 {
+  @apply ~text-x3;
+}
+
+h4 {
+  @apply ~text-x2;
+}
+
+h5 {
+  @apply ~text-x1;
+}
+
+body {
+  @apply ~text-1;
+}
+`,
+      "css",
+    ),
+    config: monaco.editor.createModel(js`export default {
+  theme: {},
+  plugins: [], /* plugins should be empty */
+};
+`, "typescript"),
+  }));
+
+  const monacoTailwindcssRef = useRef<MonacoTailwindcss>(null);
+
+  const handleChange = async () => {
+    console.log('a');
+    if (!monacoTailwindcssRef.current) return;
+    console.log('b');
+
+    const css = await monacoTailwindcssRef.current.generateStylesFromContent(
+      tabs.css.getValue(),
+      [{ content: tabs.html.getValue() }],
+    );
+    const html = tabs.html.getValue();
+    // const config = tabs.config.getValue();
+
+    const content = generateSrcDoc(html, css);
+
+    onChange(content);
+  };
+
+  useEffect(() => {
+    const onResize = () => {
+      if (!editorRef.current) return;
+
+      editorRef.current.layout();
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    tabs["config"].onDidChangeContent(() => {
+      const code = tabs["config"].getValue();
+
+      let evaluatedCode;
+
+      const blob = new Blob([code], { type: "application/javascript" });
+      const url = URL.createObjectURL(blob);
+
+      import(/* webpackIgnore: true */ url)
+        .then((module) => {
+          evaluatedCode = module.default;
+
+          monacoTailwindcssRef.current?.setTailwindConfig(
+            evaluatedCode as TailwindConfig,
+          );
+        })
+        .catch((error) => {
+          console.error("Error evaluating code:", error.message);
+          evaluatedCode = null;
+        });
+    });
+
+    Object.values(tabs).map((tab) => {
+      tab.onDidChangeContent(handleChange);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!editorRef.current) return;
+
+    editorRef.current.setModel(tabs[activeTab]);
+  }, [editorRef, tabs, activeTab]);
+
+  return (
+    <MonacoEditor
+      beforeMount={() => {
+        monaco.languages.css.cssDefaults.setOptions({
+          data: {
+            dataProviders: {
+              tailwindcssData,
+            },
+          },
+        });
+
+        monacoTailwindcssRef.current = configureMonacoTailwindcss(monaco);
+      }}
+      onMount={(editor, monaco) => {
+        editorRef.current = editor;
+        monacoEditorRef.current = monaco;
+
+        editor.setModel(tabs[activeTab]);
+
+        handleChange();
+      }}
+    />
+  );
+}

apps/playground/app/favicon.ico

@@ -0,0 +1,72 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/playground/app/globals.css

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}