Merge pull request #25 from ghivert/feat/add-redraw

Add Redraw Sketch
ghivert · Aug 21, 2024 · 1ffe47e · 1ffe47e
2 parents 4485e09 + 95814ec
commit 1ffe47e
Show file tree

Hide file tree

Showing 26 changed files with 5,168 additions and 13 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -46,7 +46,7 @@ jobs:
  - run: gleam format --check src test
  working-directory: sketch_css
 
- test-sketch-lustr:
+ test-sketch-lustre:
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v3
@@ -64,3 +64,20 @@ jobs:
  working-directory: sketch_lustre
  - run: gleam format --check src test
  working-directory: sketch_lustre
+
+ test-sketch-redraw:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: erlef/setup-beam@v1
+ with:
+ otp-version: '26.0.2'
+ gleam-version: '1.4.1'
+ rebar3-version: '3'
+ # elixir-version: "1.15.4"
+ - run: gleam deps download
+ working-directory: sketch_redraw
+ - run: gleam test --target=javascript
+ working-directory: sketch_redraw
+ - run: gleam format --check src test
+ working-directory: sketch_redraw
diff --git a/README.md b/README.md
@@ -11,11 +11,11 @@ and multiple runtimes to get CSS in Gleam correctly executed.
 
 - [`sketch_css`](https://hexdocs.pm/sketch_css)
 - [`sketch_lustre`](https://hexdocs.pm/sketch_lustre)
+- [`sketch_redraw`](https://hexdocs.pm/sketch_redraw)
 
 ## Future integrations
 
 - `sketch_nakai`
-- `sketch_redraw`
 
 ## Integrating the Sketch list
 

diff --git a/e2e/redraw/.gitignore b/e2e/redraw/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.yarn
+.pnp.cjs
+.pnp.loader.mjs
diff --git a/e2e/redraw/.prettierrc b/e2e/redraw/.prettierrc
@@ -0,0 +1,16 @@
+{
+ "printWidth": 80,
+ "semi": false,
+ "singleQuote": true,
+ "arrowParens": "avoid",
+ "trailingComma": "es5",
+ "importOrder": [
+ "^\\@.*$",
+ "^[^@\\.].*$",
+ "^\\..*$"
+ ],
+ "importOrderSortSpecifiers": true,
+ "plugins": [
+ "@trivago/prettier-plugin-sort-imports"
+ ]
+}
diff --git a/e2e/redraw/.yarnrc.yml b/e2e/redraw/.yarnrc.yml
@@ -0,0 +1 @@
+# nodeLinker: node-modules
diff --git a/e2e/redraw/README.md b/e2e/redraw/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/e2e/redraw/gleam.toml b/e2e/redraw/gleam.toml
@@ -0,0 +1,18 @@
+name = "sketch_landing"
+target = "javascript"
+version = "1.0.0"
+
+description = ""
+licences = ["MIT"]
+links = [{title = "Sponsor", href = "https://github.com/sponsors/ghivert"}]
+repository = {type = "github", user = "ghivert", repo = "sketch"}
+
+[dependencies]
+gleam_stdlib = ">= 0.34.0 and < 2.0.0"
+redraw_dom = ">= 1.1.0 and < 2.0.0"
+sketch = ">= 3.0.2 and < 4.0.0"
+sketch_redraw = {path = "../../sketch_redraw"}
+redraw = ">= 1.1.0 and < 2.0.0"
+
+[dev-dependencies]
+gleeunit = ">= 1.0.0 and < 2.0.0"
diff --git a/e2e/redraw/index.html b/e2e/redraw/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + React</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/sketch_landing.mjs"></script>
+ </body>
+</html>
diff --git a/e2e/redraw/manifest.toml b/e2e/redraw/manifest.toml
@@ -0,0 +1,22 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+ { name = "gleam_erlang", version = "0.25.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_erlang", source = "hex", outer_checksum = "054D571A7092D2A9727B3E5D183B7507DAB0DA41556EC9133606F09C15497373" },
+ { name = "gleam_javascript", version = "0.12.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleam_javascript", source = "hex", outer_checksum = "6EB652538B31E852FE0A8307A8B6314DEB34930944B6DDC41CCC31CA344DA35D" },
+ { name = "gleam_otp", version = "0.11.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_stdlib"], otp_app = "gleam_otp", source = "hex", outer_checksum = "517FFB679E44AD71D059F3EF6A17BA6EFC8CB94FA174D52E22FB6768CF684D78" },
+ { name = "gleam_stdlib", version = "0.40.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "86606B75A600BBD05E539EB59FABC6E307EEEA7B1E5865AFB6D980A93BCB2181" },
+ { name = "gleeunit", version = "1.2.0", build_tools = ["gleam"], requirements = ["gleam_stdlib"], otp_app = "gleeunit", source = "hex", outer_checksum = "F7A7228925D3EE7D0813C922E062BFD6D7E9310F0BEE585D3A42F3307E3CFD13" },
+ { name = "redraw", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_javascript", "gleam_stdlib"], otp_app = "redraw", source = "hex", outer_checksum = "4E6F55F965FD7A4B0514E269AC61BF8EF5EE421DCC19333BF80F4874250FDFB6" },
+ { name = "redraw_dom", version = "1.1.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw"], otp_app = "redraw_dom", source = "hex", outer_checksum = "0FFAAA6FFA52B88C1506EB6908E07479DA51B9F55F875A596E0B48E30FCE5DCE" },
+ { name = "sketch", version = "3.0.2", build_tools = ["gleam"], requirements = ["gleam_erlang", "gleam_otp", "gleam_stdlib"], source = "local", path = "../../sketch" },
+ { name = "sketch_redraw", version = "1.0.0", build_tools = ["gleam"], requirements = ["gleam_stdlib", "redraw", "sketch"], source = "local", path = "../../sketch_redraw" },
+]
+
+[requirements]
+gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
+gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
+redraw = { version = ">= 1.1.0 and < 2.0.0" }
+redraw_dom = { version = ">= 1.1.0 and < 2.0.0" }
+sketch = { version = ">= 3.0.2 and < 4.0.0" }
+sketch_redraw = { path = "../../sketch_redraw" }
diff --git a/e2e/redraw/package.json b/e2e/redraw/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "sketch_landing",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint .",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "dotenv": "^16.4.5",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
+ },
+ "devDependencies": {
+ "@chouqueth/gleam": "^1.4.1",
+ "@eslint/js": "^9.9.0",
+ "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+ "@types/react": "^18.3.3",
+ "@types/react-dom": "^18.3.0",
+ "@vitejs/plugin-react-swc": "^3.5.0",
+ "eslint": "^9.9.0",
+ "eslint-plugin-react": "^7.35.0",
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+ "eslint-plugin-react-refresh": "^0.4.9",
+ "globals": "^15.9.0",
+ "prettier": "^3.3.3",
+ "vite": "^5.4.1",
+ "vite-gleam": "^0.4.3"
+ },
+ "packageManager": "[email protected]"
+}
diff --git a/e2e/redraw/src/sketch_landing.gleam b/e2e/redraw/src/sketch_landing.gleam
@@ -0,0 +1,41 @@
+import redraw
+import redraw/handler
+import redraw/html as h
+import redraw_dom/client
+import sketch
+import sketch/redraw as sr
+import sketch/redraw/html as sh
+import sketch/size.{px}
+
+pub fn main() {
+ let app = app()
+ let root = client.create_root("root")
+ client.render(root, redraw.strict_mode([sr.provider([app()])]))
+}
+
+fn app() {
+ use <- redraw.component__("App")
+ let #(count, set_count) = redraw.use_state_(0)
+ let on_click = handler.on_click(fn(_) { set_count(fn(c) { c + 1 }) })
+ redraw.fragment([
+ h.h1([], [h.text("Sketch")]),
+ h.div([], [h.text("CSS-in-Gleam, made simple")]),
+ h.div([], [h.button([on_click], [h.text("Click me")])]),
+ sh.div(section(count), [], [
+ h.h2([], [h.text("Sketch CSS")]),
+ sh.button(section(count), [], [h.text("Hmmm")]),
+ ]),
+ ])
+}
+
+fn section(count) {
+ sketch.class([
+ sketch.background(case count % 2 == 0 {
+ True -> "red"
+ False -> "blue"
+ }),
+ sketch.color("white"),
+ sketch.border_radius(px(8)),
+ sketch.transition("all .3s"),
+ ])
+}
diff --git a/e2e/redraw/src/sketch_landing.mjs b/e2e/redraw/src/sketch_landing.mjs
@@ -0,0 +1,3 @@
+import * as landing from './sketch_landing.gleam'
+
+landing.main()
diff --git a/e2e/redraw/vite.config.js b/e2e/redraw/vite.config.js
@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react-swc'
+import 'dotenv/config'
+import { createLogger, defineConfig } from 'vite'
+import gleam from 'vite-gleam'
+// import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+const customLogger = createLogger()
+const loggerWarn = customLogger.warn
+customLogger.warn = (msg, options) => {
+ if (msg.includes('import_')) return
+ loggerWarn(msg, options)
+}
+
+export default defineConfig({
+ customLogger,
+ plugins: [gleam(), react()],
+})