Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Vite HMR #34

Closed
dmmulroy opened this issue Jan 2, 2024 · 5 comments
Closed

Fix Vite HMR #34

dmmulroy opened this issue Jan 2, 2024 · 5 comments
Labels
bug Something isn't working v1.0.0 Required for V1.0.0 release

Comments

@dmmulroy
Copy link
Owner

dmmulroy commented Jan 2, 2024

We use: https://github.com/pdelacroix/vite-plugin-melange
@dmmulroy dmmulroy added bug Something isn't working v1.0.0 Required for V1.0.0 release labels Jan 2, 2024
@dmmulroy
Copy link
Owner Author

dmmulroy commented Jan 2, 2024

Okay, definitely an issue with the dune files/vite config in our project. HMR is working fine using https://github.com/pdelacroix/melange-vite-template

@dmmulroy
Copy link
Owner Author

dmmulroy commented Jan 2, 2024

Actually now it seems I can't get HMR to work w/ that template 🤔

@dmmulroy
Copy link
Owner Author

dmmulroy commented Jan 2, 2024

It appears to be a problem with chokidar and osx. On some projects, updating vite.config.js to use usePolling seems to resolve issues.

import { defineConfig } from "vite";
import melangePlugin from "vite-plugin-melange";

export default defineConfig({
  plugins: [
    melangePlugin({
      emitDir: "src",
      buildCommand: "opam exec -- dune build @react",
      watchCommand: "opam exec -- dune build --watch @react",
    }),
  ],
  server: {
    watch: {
      usePolling: true,
      /* awaitWriteFinish: {
        stabilityThreshold: 500,
        pollInterval: 20,
      }, */
    },
  },
});

@dmmulroy
Copy link
Owner Author

dmmulroy commented Jan 2, 2024 •
edited
Loading

Configuring chokidar has proved to be quite a tricky and finicky process with vite-melange-app with multiple users (myself included) having mixed results.

In the interim of completing #37 we're going to utilize vite in the following way:

./dune

(dirs :standard \ node_modules)

(alias
 (name all)
 (deps
  (alias_rec vite)))

(rule
 (alias vite)
 (targets
  (dir dist))
 (deps
  (alias_rec app_name)
  (:vite ./vite.config.js)
  (:index_html ./index.html))
 (action
  (system "../../node_modules/.bin/vite build"))
 (mode
  (promote (until-clean))))

(melange.emit
 (target output)
 (alias app_name)
 (libraries app)
 (module_systems
  (es6 mjs)))

./vite.config.js

import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
  build: {
    outDir: "./dist",
  },
  plugins: [nodeResolve()],
};

./src/dune

(library
 (name app)
 (modes melange)
 (libraries bindings create_melange_app reason-react)
 (preprocess
  (pps melange.ppx reason-react-ppx)))

./package.json

{
  "name": "app_name",
  "version": "0.0.1",
  "description": "Enter a description of your app here",
  "scripts": {
    "dev": "dune build && concurrently 'npm:vite-dev' 'npm:dune-watch'",
    "vite-dev": "vite _build/default",
    "dune-watch": "dune build -w",
    "build": "dune build",
    "bundle": "dune build && vite build",
    "serve": "dune build && vite preview"
  },

  "dependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "concurrently": "^8.2.2",
    "vite": "^4.5.0",
    "vite-plugin-melange": "^2.2.0"
  }
}

./index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>create-melange-app</title>
</head>

<body>
  <div id="root" class="flex h-screen w-screen flex-col items-center  bg-gradient-to-b from-[#24273a] to-[#181926]">
    <!-- This path is relative to the _build/default directory  -->
    <script type="module" src="./output/src/App.mjs"></script>
</body>

</html>

This was referenced Jan 2, 2024
Open
Open
@dmmulroy
Copy link
Owner Author

dmmulroy commented Jan 3, 2024

Resolved by: 69d660f

@dmmulroy dmmulroy closed this as completed Jan 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working v1.0.0 Required for V1.0.0 release
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@dmmulroy