Fork me on GitHub
#squint
<
2024-04-25
>
borkdude12:04:44

@brandon746 I'm looking into the plugin stuff now and want to run a local version of squint-cljs with it. 🧵

borkdude12:04:19

I've added:

"squint-cljs": "file:../../../squint-cljs"
in several places in package.json but I'm getting:
$ npm run dev

> [email protected] dev
> vite

failed to load config from /Users/borkdude/dev/vite-plugin-squint/demo/react/vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'squint-cljs' imported from /Users/borkdude/dev/vite-plugin-squint/index.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:780:9)
    at moduleResolve (node:internal/modules/esm/resolve:829:20)
    at defaultResolve (node:internal/modules/esm/resolve:1034:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:375:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:344:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:220:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)
Any ideas?

borkdude12:04:47

$ ls -la node_modules/squint-cljs
lrwxr-xr-x  1 borkdude  staff  23 Apr 25 14:46 node_modules/squint-cljs -> ../../../../squint-cljs

borkdude12:04:56

$ realpath node_modules/squint-cljs
/Users/borkdude/dev/squint-cljs

Brandon Stubbs13:04:26

Hey, I did the following and it worked. Apply patch, then run:

# in project root vite-plugin-squint
rm -rf node_modules package-lock.json; npm i
cd demo/react
rm -rf node_modules package-lock.json; npm i
npm run dev

Brandon Stubbs13:04:50

Maybe your local project is in the squint folder and not squint-cljs?

borkdude13:04:28

oh dude, of course 😆

Brandon Stubbs13:04:42

NGL it got me too 😂

rafalw18:04:03

Hi, Squint freshly cloned from github, on bb dev gives me this error (I have no idea what is happening), any hints? -> https://gist.github.com/rafalwysocki/6a4da73775043eb1615cc4cdc539d349

borkdude18:04:27

Is it possible not to flood the channel with a large stacktrace? Preferably post it in a github gist and link it here

👍 1
borkdude18:04:35

try running bb watch only

borkdude18:04:42

also you might have to run npm install in the squint + playground dir manually

borkdude18:04:49

after that bb dev probably works

borkdude18:04:15

if you don't need the playground, then bb watch is sufficient

rafalw18:04:17

I've run npm install before, after running it in the playground I'm getting the same error, with little differences, don't know if significant https://gist.github.com/rafalwysocki/d96a16277818ba772103bb13985ef826

borkdude18:04:54

I have run into this problem before, let me check if I can find what it was

borkdude18:04:28

ah for me it was only a problem with github pages, not with locally running things

borkdude18:04:42

The init task in the playground does this:

init {:requires ([babashka.fs :as fs])
        :task (do
                (shell "npm install")
                (when-not (fs/exists? "public/js/squint-local")
                  (fs/create-sym-link "public/js/squint-local" (fs/parent (fs/parent (fs/absolutize ".")))))
                (let [squint-prod (fs/file "public" "public" "src" "squint")]
                  (fs/create-dirs squint-prod)
                  (doseq [source-file ["core.js" "string.js" "set.js" "html.js"]]
                    (fs/copy (fs/file  ".." "src" "squint" source-file)
                             squint-prod
                             {:replace-existing true}))))}

borkdude18:04:11

which means it creates a symbolic link to squint in the the parent directory

borkdude18:04:04

perhaps you can check out if that worked successfully on your system

rafalw18:04:23

I've executed this script in the playground

(do
;;  (shell "npm install")
  (when-not (fs/exists? "public/js/squint-local")
    (fs/create-sym-link "public/js/squint-local" (fs/parent (fs/parent (fs/absolutize ".")))))
  (let [squint-prod (fs/file "public" "public" "src" "squint")]
    (fs/create-dirs squint-prod)
    (doseq [source-file ["core.js" "string.js" "set.js" "html.js"]]
      (fs/copy (fs/file  ".." "src" "squint" source-file)
               squint-prod
               {:replace-existing true}))))
I've done npm install by hand before, script finished without output/errors dir public/public/src/squint/ was created and has content core.js html.js set.js string.js in the public/js/ there is symlink squint-local -> /tmp/squint_main

borkdude18:04:31

I think that is correct

rafalw18:04:09

../src/squint also looks good

rafalw20:04:43

https://gist.github.com/rafalwysocki/2135c3cdab300f099a9ade515f2e15b3 On macos, I have similar issue, but it runs despite the errors

borkdude18:04:31

@brandon746 I have something working locally with the vite plugin, the symbolic reference now works (and is translated to ./Component.cljs):

(ns App
  (:require ["./App.css"]
            [Component :as Component]))

(defn App []
  #jsx [Component/Component])
🧵

borkdude18:04:49

Also I believe that macros should work with this approach, although I haven't tested that yet

borkdude18:04:58

Perhaps you could try to check out squint locally with the branch plugin-stuff and the plugin branch compiler-api . I have only altered the react example. Perhaps you can try and see if you can get it working as well and then we can maybe take it from there

borkdude18:04:53

of course @U050TNB9F is also welcome to try

borkdude18:04:55

(at this point everything is pretty much WIP)

Brandon Stubbs20:04:19

Thanks @U04V15CAJ will take a look at it

Brandon Stubbs20:04:54

Did you see the PR that had the POC? This had a few changes compared to main in order for tailwind to work https://github.com/squint-cljs/vite-plugin-squint/pull/20

borkdude20:04:00

yes, first I wanted to get something going with a local squint build. I will try your changes tomorrow

Brandon Stubbs20:04:50

Ok great, I will get yours working locally and try and also get my PR working locally with your changes

martinklepsch20:04:02

I’m unfortunately on a trip the next week so I won’t be able to give this a try but I’m excited to try after. Fully trust that it’ll be great :)

💙 1
Brandon Stubbs21:04:22

Awesome your branches are working locally. I also pushed the changes to that PR so that should also work with your local squint and latest changes

borkdude09:04:13

I'll have a look now at your PR

Brandon Stubbs12:04:36

Ok, just logged on for the day

borkdude15:04:52

sorry, went down a rabbit hole in another project today :/

Brandon Stubbs15:04:47

No problem, no rush 🙂

borkdude20:04:59

it's probably going to be next week Wednesday or so that I can look at this again. but: if you can provide very very small obvious PRs to the local-squint based branch with good comments on what it does, I might merge it.

borkdude20:04:27

this way I can understand the reasoning behind the code, perhaps

Brandon Stubbs13:05:19

Sorry been a busy week, catching up with this. I ran the react example in the PR (As this has changes for all the different cases to support as well as the tailwind issue that needed to be fixed) https://github.com/squint-cljs/vite-plugin-squint/pull/20 This works with the local squint compiler except for macros. (This can be done by uncommenting the macro bits in the main.cljs file)

9:27:03 AM [vite] Internal server error: No protocol method ISwap.-swap! defined for type null: 
      at Object.cljs$core$missing_protocol [as missing_protocol] (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:314:9)
      at G__28368__2 (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:3642:17)
      at G__28368 (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:3691:20)
      at Function.cljs$core$IFn$_invoke$arity$2 (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:3740:8)
      at Object.cljs$core$_swap_BANG_ [as _swap_BANG_] (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:3715:30)
      at Function.cljs$core$IFn$_invoke$arity$2 (file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/cljs.core.js:16172:18)
      at file:///Users/brandonstubbs/projects/clojure/squint/lib/cljs-runtime/squint.compiler.node.js:191:29
9:27:03 AM [vite] Pre-transform error: No protocol method ISwap.-swap! defined for type null:
I will debug a bit and see what’s going on

borkdude13:05:38

ok, I'll have a look

Brandon Stubbs13:05:21

I guess because compile-string doesn’t create a store like the compile-file does https://github.com/squint-cljs/squint/blob/plugin-stuff/src/squint/compiler/node.cljs#L133

Brandon Stubbs13:05:18

This is why PR I thought we would have to create an instance of the squint compiler so that it could have an internal store for stuff like that https://github.com/squint-cljs/vite-plugin-squint/pull/20/files#diff-d6299b5bb2afc0956126a0adb12fd89829e01a4cc025e7277a092228b96f32e4R27-R29

borkdude13:05:17

fixed that on main now

🚀 1
Brandon Stubbs13:05:03

Great, will merge that through and check again

Brandon Stubbs13:05:52

Just reading the change, the problem is that the state would be recreated for every compile-string right?

borkdude13:05:14

I broke some tests, wait a minute

borkdude13:05:10

ok false alarm. ok, what did you say

borkdude13:05:35

> , the problem is that the state would be recreated for every compile-string right doesn't really matter, unless you compile individual forms for a separate file

👍 1
borkdude13:05:50

like in the REPL

borkdude13:05:56

but this isn't for a REPL

borkdude13:05:30

So I have a compiler API branch. Can you make small incremental PRs against that, this will probably explain to me what's necessary

borkdude13:05:16

or just discuss the tiny changes/issues here

Brandon Stubbs13:05:06

So the main issue with the compiler-api branch is that it is using the old way this plugin was used. So it doesn’t work with Tailwind JIT because of not having a file on the fs. So the following changes need to be done, which I can port from my PR but all of it will need to be ported: • resolveId must resolve to the physical JSX file that will be written • resolveId must resolve relative imports to an absolute import as the physical JSX file will be compiled into another directory (This also breaks in the original squint vite react example) • load needs to compile the cljs file to jsx and write this to disk. But only if there has been changes as vite also will watch the jsx directory this would cause an infinite loop. Those are really the only changes between the PR’s

Brandon Stubbs14:05:23

I merged your main changes into the plugin-stuff branch locally and tested, macros now work

borkdude15:05:23

I will get back to this

borkdude14:05:53

ok let me take a look at this again, sorry for the delay

Brandon Stubbs14:05:18

No problem at all, no rush for it