Merge pull request #25 from andi23rosca/solid-markdown-v2

solid-markdown V2
andi23rosca · Oct 31, 2023 · 2fc3e55 · 2fc3e55
2 parents 33f63ab + 7288cae
commit 2fc3e55
Show file tree

Hide file tree

Showing 39 changed files with 3,155 additions and 8,450 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,10 @@
-# SolidJS version of `react-markdown`
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=solid-markdown&background=tiles&project=%20" alt="solid-markdown">
+</p>
+
+# `solid-markdown`
+
+Render markdown as solid components.
 
 The implementation is 90% shamelessly copied from https://github.com/remarkjs/react-markdown.
 
@@ -10,15 +16,15 @@ Changes include:
 Please check the original repo for in-depth details on how to use.
 
 ## Installation
-
-```
+```bash
 npm install solid-markdown
 ```
 
+
 ## Usage
 
 ```jsx
-import SolidMarkdown from "solid-markdown";
+import { SolidMarkdown } from "solid-markdown";
 
 const markdown = `
 # This is a title

diff --git a/babel.config.json b/babel.config.json
diff --git a/biome.json b/biome.json
@@ -0,0 +1,12 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.3.1/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	}
+}
diff --git a/dev/App.tsx b/dev/App.tsx
@@ -0,0 +1,64 @@
+// solid-refresh
+import { createSignal, type Component, createEffect } from "solid-js";
+import remarkGfm from "remark-gfm";
+import { SolidMarkdown } from "../src";
+import { Components } from "src/types";
+const initial = `# 🚀 solid-markdown demo
+
+Edit any of the text and see it rendered in real time.
+
+A paragraph with *emphasis* and **strong importance**.
+
+## Custom component for heading 2
+
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+* Lists
+* [ ] todo
+* [x] done
+	1. nested
+	2. lists
+* another one
+
+  nested text under a list item
+
+A table:
+
+| Syntax      | Description | Test Text     |
+| :---        |    :----:   |          ---: |
+| Header      | Title       | Here's this   |
+| Paragraph   | Text        | And more      |`;
+
+const App: Component = () => {
+	const [md, setMd] = createSignal(initial);
+
+	return (
+		<div class="container">
+			<textarea
+				rows={md().split(/\r\n|\r|\n/).length + 2}
+				class="editor"
+				onInput={(e) => {
+					setMd(e.currentTarget.value);
+				}}
+				contentEditable
+			>
+				{md()}
+			</textarea>
+
+			<SolidMarkdown
+				remarkPlugins={[remarkGfm]}
+				components={{
+					h2: Heading2,
+				}}
+			>
+				{md()}
+			</SolidMarkdown>
+		</div>
+	);
+};
+
+const Heading2: Components["h2"] = (props) => {
+	return <p style={{ color: "red" }}>{props.children}</p>;
+};
+
+export default App;
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <title>Solid Markdown Demo</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+
+  <script src="./index.tsx" type="module"></script>
+</body>
+
+</html>
diff --git a/dev/index.tsx b/dev/index.tsx
@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web'
+import "./styles.css"
+import App from './App'
+
+render(() => <App />, document.getElementById('root')!)
diff --git a/example/src/logo.svg → dev/logo.svg b/example/src/logo.svg → dev/logo.svg
diff --git a/dev/styles.css b/dev/styles.css
@@ -0,0 +1,28 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  font-size: 16px;
+  padding: 1rem;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 3rem;
+  max-width: 65rem;
+  padding: 1rem;
+  margin: 0 auto;
+}
+@media screen and (max-width: 600px) {
+  .container {
+    grid-template-columns: 1fr;
+    row-gap: 1rem;
+  }
+}
+
+.container .editor {
+  padding: 1rem;
+  white-space: pre-wrap;
+  resize: none;
+  font-family: monospace;
+}
diff --git a/dev/tsconfig.json b/dev/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "types": ["vite/client"]
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import solidPlugin from 'vite-plugin-solid'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      src: '/src',
+    },
+  },
+  plugins: [
+    solidPlugin(),
+    {
+      name: 'Reaplace env variables',
+      transform(code, id) {
+        if (id.includes('node_modules')) {
+          return code
+        }
+        return code
+          .replace(/process\.env\.SSR/g, 'false')
+          .replace(/process\.env\.DEV/g, 'true')
+          .replace(/process\.env\.PROD/g, 'false')
+          .replace(/process\.env\.NODE_ENV/g, '"development"')
+          .replace(/import\.meta\.env\.SSR/g, 'false')
+          .replace(/import\.meta\.env\.DEV/g, 'true')
+          .replace(/import\.meta\.env\.PROD/g, 'false')
+          .replace(/import\.meta\.env\.NODE_ENV/g, '"development"')
+      },
+    },
+  ],
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+  },
+})
diff --git a/env.d.ts b/env.d.ts
@@ -0,0 +1,18 @@
+declare global {
+  interface ImportMeta {
+    env: {
+      NODE_ENV: 'production' | 'development'
+      PROD: boolean
+      DEV: boolean
+    }
+  }
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: 'production' | 'development'
+      PROD: boolean
+      DEV: boolean
+    }
+  }
+}
+
+export {}
diff --git a/example/.gitignore b/example/.gitignore
diff --git a/example/README.md b/example/README.md
diff --git a/example/index.html b/example/index.html