@colisweb/rescript-toolkit 2.67.0 → 2.67.1

package/vite.config.js

@@ -3,14 +3,56 @@ import react from "@vitejs/plugin-react";
 import createReScriptPlugin from "@jihchi/vite-plugin-rescript";
 import mdx from "@mdx-js/rollup";
 import fs from "fs";
+import addClasses from "rehype-add-classes";
+import rehypeHighlight from "rehype-highlight";
+import rescriptHighlight from "./playground/utils/rescript-highlight";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeSlug from "rehype-slug";
 
 const appDirectory = fs.realpathSync(process.cwd());
+const isProduction = process.env.NODE_ENV === "production";
 
 export default defineConfig({
-  plugins: [mdx(), createReScriptPlugin(), react()],
+  base: isProduction ? "/colisweb-open-source/rescript-toolkit/" : "",
+  build: {
+    sourcemap: true,
+  },
+  plugins: [
+    mdx({
+      rehypePlugins: [
+        [
+          addClasses,
+          {
+            h1: "text-4xl",
+            h2: "text-3xl",
+            h3: "text-2xl",
+            "h1,h2,h3,h4": "font-display font-bold underline mb-1",
+            p: "mb-1",
+            pre: "bg-white p-2 rounded-lg border my-4 block",
+            ul: "list-disc",
+          },
+        ],
+        [rehypeSlug],
+        [rehypeAutolinkHeadings, { behavior: "wrap" }],
+        [
+          rehypeHighlight,
+          {
+            languages: {
+              rescript: rescriptHighlight,
+            },
+          },
+        ],
+      ],
+    }),
+    createReScriptPlugin(),
+    react(),
+  ],
   define: {
     global: {},
   },
+  optimizeDeps: {
+    include: ["highlight.js"],
+  },
   resolve: {
     alias: [
       {

package/playground/Playground_Component.res

@@ -1,33 +0,0 @@
-module type Config = {
-  let resi: string
-  let codeExample: string
-  @react.component
-  let make: unit => React.element
-}
-
-module ComponentDetails = {
-  @react.component
-  let make = (~component: module(Config)) => {
-    let module(Config) = component
-    <div>
-      <ReachUi.Tabs>
-        <ReachUi.TabList className="mb-4">
-          <ReachUi.Tab> {"Example"->React.string} </ReachUi.Tab>
-          <ReachUi.Tab> {"Code example"->React.string} </ReachUi.Tab>
-          <ReachUi.Tab> {"API"->React.string} </ReachUi.Tab>
-        </ReachUi.TabList>
-        <ReachUi.TabPanels>
-          <ReachUi.TabPanel>
-            <Config />
-          </ReachUi.TabPanel>
-          <ReachUi.TabPanel>
-            <CodeBlock> {Config.codeExample->React.string} </CodeBlock>
-          </ReachUi.TabPanel>
-          <ReachUi.TabPanel>
-            <CodeBlock> {Config.resi->React.string} </CodeBlock>
-          </ReachUi.TabPanel>
-        </ReachUi.TabPanels>
-      </ReachUi.Tabs>
-    </div>
-  }
-}

package/playground/Playground_ComponentDetails.res

@@ -1,25 +0,0 @@
-@react.component
-let make = (~component: string) => {
-  PlaygroundRouter.Breadcrumb.use([
-    {
-      route: Components(List),
-      text: "Components"->React.string,
-    },
-    {
-      route: Components(Details(component)),
-      text: <span className="capitalize"> {`${component}`->React.string} </span>,
-    },
-  ])
-  <div>
-    <h1 className="text-4xl font-bold font-display mb-4 capitalize"> {component->React.string} </h1>
-    <div>
-      {Playground_ComponentsList.components
-      ->Array.getBy(((name, _)) => {
-        component === name
-      })
-      ->Option.mapWithDefault("unknown"->React.string, ((_, playgroundModule)) => {
-        <Playground_Component.ComponentDetails component={playgroundModule} />
-      })}
-    </div>
-  </div>
-}

package/playground/Playground_ComponentsList.res

@@ -1,43 +0,0 @@
-let components: array<(string, module(Playground_Component.Config))> = [
-  ("card", module(Playground_Card)),
-  ("switch", module(Playground_Switch)),
-]
-
-module ComponentLink = {
-  @react.component
-  let make = (~name) => {
-    <PlaygroundRouter.Link
-      route={Components(Details(name))}
-      className="p-4 rounded-lg border bg-white hover:border-primary-700 w-64">
-      <strong className="capitalize"> {name->React.string} </strong>
-    </PlaygroundRouter.Link>
-  }
-}
-
-@react.component
-let make = () => {
-  let (search, setSearch) = React.useState(() => "")
-
-  <div>
-    <h1 className="text-4xl font-bold font-display mb-4 flex flex-row gap-4 items-center">
-      {"Components"->React.string}
-      <input
-        type_="search"
-        placeholder="Search"
-        value={search}
-        onChange={event => {
-          let target = event->ReactEvent.Form.target
-
-          setSearch(_ => target["value"])
-        }}
-        className="bg-white text-sm font-sans px-4 font-normal  rounded-md border border-neutral-300 focus:border-primary-700 h-10 w-60"
-      />
-    </h1>
-    <div className="flex flex-row flex-wrap gap-4">
-      {components
-      ->Array.keep(((name, _)) => name->Js.String2.toLowerCase->Js.String2.includes(search))
-      ->Array.map(((name, _)) => <ComponentLink name />)
-      ->React.array}
-    </div>
-  </div>
-}