add vite-scalajs-react-sbt example

nguyenyou · Jun 22, 2024 · f2a604c · f2a604c
1 parent 9fb9cbc
commit f2a604c
Show file tree

Hide file tree

Showing 15 changed files with 229 additions and 0 deletions.
diff --git a/examples/vite-scalajs-react-sbt/.gitignore b/examples/vite-scalajs-react-sbt/.gitignore
@@ -0,0 +1,36 @@
+# 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?
+.bsp
+.metals
+.scala-build
+scalajs-modules
+scalawind.scala
+bun.lockb
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+target
+.bloop
+.idea
diff --git a/examples/vite-scalajs-react-sbt/.scalafmt.conf b/examples/vite-scalajs-react-sbt/.scalafmt.conf
@@ -0,0 +1,3 @@
+version = "3.7.15"
+runner.dialect = scala3
+maxColumn=120
diff --git a/examples/vite-scalajs-react-sbt/README.md b/examples/vite-scalajs-react-sbt/README.md
@@ -0,0 +1,47 @@
+# Scalawind Vite
+
+## Install NodeJS
+
+In case you don't have NodeJS yet, this is my recommendation: https://github.com/Schniz/fnm
+
+## Install sbt
+
+Following the instructions here: https://www.scala-sbt.org/download/
+
+## Install dependencies
+
+```bash
+$ npm install
+# or
+$ bun install
+# or
+$ pnpm install
+# or
+$ yarn install
+```
+
+## Start dev server
+
+```bash
+$ npm run dev:scala
+# or
+$ bun dev:scala
+# or
+$ pnpm dev:scala
+# or
+$ yarn dev:scala
+```
+
+In another terminal:
+
+```bash
+$ npm run dev
+# or
+$ bun dev
+# or
+$ pnpm dev
+# or
+$ yarn dev
+```
+
+Open: http://localhost:5173
diff --git a/examples/vite-scalajs-react-sbt/build.sbt b/examples/vite-scalajs-react-sbt/build.sbt
@@ -0,0 +1,17 @@
+import org.scalajs.linker.interface.ModuleSplitStyle
+
+enablePlugins(ScalaJSPlugin)
+
+scalaVersion := "3.3.3"
+scalaJSUseMainModuleInitializer := true
+
+scalaJSLinkerConfig ~= {
+  _.withModuleKind(ModuleKind.ESModule)
+    .withModuleSplitStyle(ModuleSplitStyle.SmallModulesFor(List("myapp")))
+}
+
+libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.4.0"
+libraryDependencies += "com.github.japgolly.scalajs-react" %%% "core" % "3.0.0-beta3"
+
+Compile / fastLinkJS / scalaJSLinkerOutputDirectory := target.value / "scalajs-modules"
+Compile / fullLinkJS / scalaJSLinkerOutputDirectory := target.value / "scalajs-modules"
diff --git a/examples/vite-scalajs-react-sbt/index.html b/examples/vite-scalajs-react-sbt/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>Scala ❤️ Tailwind</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/examples/vite-scalajs-react-sbt/main.js b/examples/vite-scalajs-react-sbt/main.js
@@ -0,0 +1,2 @@
+import './style.css'
+import 'scalajs:main.js'
diff --git a/examples/vite-scalajs-react-sbt/package.json b/examples/vite-scalajs-react-sbt/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "scalawind-vite-sbt",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "postinstall": "scalawind generate -pcr -o ./src/main/scala/myapp/scalawind.scala",
+    "dev:scala": "sbt \"~fastLinkJS\"",
+    "build:scala": "sbt \"fullLinkJS\""
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.19",
+    "postcss": "8.4.38",
+    "scalawind": "latest",
+    "tailwindcss": "3.4.3",
+    "vite": "5.2.11"
+  }
+}
diff --git a/examples/vite-scalajs-react-sbt/postcss.config.js b/examples/vite-scalajs-react-sbt/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/vite-scalajs-react-sbt/project/build.properties b/examples/vite-scalajs-react-sbt/project/build.properties
@@ -0,0 +1 @@
+sbt.version=1.10.0
diff --git a/examples/vite-scalajs-react-sbt/project/plugins.sbt b/examples/vite-scalajs-react-sbt/project/plugins.sbt
@@ -0,0 +1 @@
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.16.0")
diff --git a/examples/vite-scalajs-react-sbt/public/vite.svg b/examples/vite-scalajs-react-sbt/public/vite.svg
diff --git a/examples/vite-scalajs-react-sbt/src/main/scala/myapp/index.scala b/examples/vite-scalajs-react-sbt/src/main/scala/myapp/index.scala
@@ -0,0 +1,28 @@
+package myapp
+
+import org.scalajs.dom
+
+import scalawind.*
+import japgolly.scalajs.react.*
+import japgolly.scalajs.react.vdom.html_<^.*
+
+@main
+def App(): Unit =
+  val container = dom.document.getElementById("app")
+
+  val Component = ScalaFnComponent
+    .withHooks[Unit]
+    .useState(0)
+    .render((props, count) => {
+      <.div(
+        ^.cls := tw.w_screen.h_screen.flex.items_center.justify_center.css,
+        <.div(
+          ^.cls := tw.p_2.text_primary.hover(tw.bg_black.text_white).css,
+          "Scala ❤️ Tailwind"
+        )
+      )
+    })
+
+  ReactDOMClient.createRoot(container).render(Component())
+
+end App
diff --git a/examples/vite-scalajs-react-sbt/style.css b/examples/vite-scalajs-react-sbt/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/examples/vite-scalajs-react-sbt/tailwind.config.cjs b/examples/vite-scalajs-react-sbt/tailwind.config.cjs
@@ -0,0 +1,33 @@
+const colors = require("tailwindcss/colors");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: {
+    files: ['./index.html', './target/scalajs-modules/**/*.js'],
+  },
+  theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      black: colors.black,
+      white: colors.white,
+      red: colors.red,
+    },
+    extend: {
+      colors: {
+        primary: '#DE3423',
+        secondary: ' #380d09'
+      },
+    },
+  },
+  corePlugins: [
+    'display',
+    'textColor',
+    'width',
+    'height',
+    'alignItems',
+    'justifyContent',
+    'padding',
+    'backgroundColor'
+  ]
+};
diff --git a/examples/vite-scalajs-react-sbt/vite.config.js b/examples/vite-scalajs-react-sbt/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+export default defineConfig({
+  plugins: [
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^scalajs:(.*)$/,
+        replacement: `/target/scalajs-modules/$1`
+      }
+    ]
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.16.0")