Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2023-11-20

Channels

#squint
<
2023-11-20
>
pyrmont05:11:04

Hi. I had a look through the repo but can't work out how to use Squint to iterate over a collection of elements (let's say integers) and output a nested JSX list. Is there a simple way to do this?

pyrmont06:11:23

This is what I have: 

(defn Keyboard []
  #jsx [:ul
         (map (fn [i]
                #jsx [:li #js {:key i} i])
              (range 0 10))])

(defn App []
  #jsx [:div {:id "App"}
        [Keyboard]])
With this code, I'm getting a warning in the console saying: Unrecognized value. Skipped inserting — LazyIterable .

pez07:11:53

Maybe try with mapv?

❤️ 2
pyrmont07:11:26

Thanks. mapv looks to have done the trick.

🙏 2
borkdude09:11:31

Is this with react? I thought react was aware of iterable values

borkdude09:11:56

oh it's solidjs probably?

borkdude09:11:05

(after googling on that message)

pyrmont09:11:38

Sorry, yes, it's Solid.

pyrmont09:11:10

mapv seems to work well so far.

borkdude09:11:29

Perhaps solid could be made aware if iterable values, perhaps post an issue in their repo (if it's important to you)

pyrmont09:11:19

Thanks. Will check that out!

borkdude09:11:53

You could make a JS repro like this: 

import { map, inc, range, take } from 'squint-cljs/core.js';

let lazyValye = take(5, map(inc, range()))

<ul>lazyValye<ul>

borkdude09:11:27

in react this works (I think) but in solid it doesn't, but all of these lazy things provide a Symbol.iterator thing which is a common abstraction for JS data structures

pyrmont09:11:10

Neat. I'll see what they say. Thanks for looking into it!

borkdude10:11:15

I just verified this example with bun + react: 

import { renderToString } from "react-dom/server";
import { map, inc, range, take } from 'squint-cljs/core.js';
let lazyValue = take(5, map(inc, range()))

function Component(props) {
  return (
    <body>
      <ul>{lazyValue}</ul>
    </body>
  );
}

const str = await renderToString(
  <Component message="Hello from server!" />,
);

console.log(str);
Running bun foo.jsx works

pyrmont10:11:50

Would I be trying to run something like that with Solid+Vite in the browser?

pyrmont10:11:05

(As part of a 'failing' test.)

borkdude10:11:52

I'll try to make a similar example with solidjs

pyrmont10:11:19

Oh, I'm sorry for the trouble :(

pez10:11:56

Very cool with lazy seq interoperability! I had no idea that could be a thing!

borkdude10:11:20

yes, but I'm running into a bug with bun here, regarding solidjs

borkdude10:11:17

anyway, with a proper front-end repro I think it would work

👍 1
borkdude10:11:25

somehow I'm getting Uncaught ReferenceError: React is not defined in the browser console when trying to do so, but this must be because it's monday

☝️ 1
borkdude11:11:52

ok finally got it working

borkdude11:11:49

I tested in this example: https://github.com/squint-cljs/squint/blob/main/examples/solid-js/src/App.cljs 

[:ul (vec (interpose " " ["Hello" "world"]))]
if you remove vec solid-js will complain

pyrmont12:11:54

It's weird to me that the code where the warning is generated doesn't seem to be part of Solid. I think it's somehow being pulled in from this repo: https://github.com/ryansolid/dom-expressions

borkdude12:11:30

nice find. I guess that lib could add support for Symbol.iterator

pyrmont12:11:29

I've created an issue (https://github.com/ryansolid/dom-expressions/issues/294). Will see what happens.

pyrmont12:11:39

@borkdude I didn't want to 'pollute' the other thread so forgive me for putting this here but just wanted to say thanks for your work on Squint. I'm excited about playing around with it and Solid.

❤️ 2
borkdude12:11:55

I always like hearing that, thanks :)

pyrmont12:11:34

Oh, and so far in my little experiment, this seems to work well in the vite.config.js file: 

// Plugin for Squint compilation
import { exec } from 'node:child_process';
const squintPlugin = () => {
  return {
    name: 'vite-squint',
    handleHotUpdate: ({file}) => {
      if (file.endsWith('.cljs')) {
        exec('npx squint ' + file);
      }
    }
  }
}
And then I just add squintPlugin() to the list of plugins later on in defineConfig .

borkdude12:11:15

nice trick. I think it could be made faster if the CLI would be exposed programmatically so you don't have to start up npx for every file. I just use npx squint watch myself with: 

{:paths ["src"]
 :output-dir "out"}

pyrmont12:11:08

Ah, yeah, I saw after I wrote this the example in the vite-react example (I think) 😄

borkdude12:11:21

I also updated the solid-js example in the repo to do that

pyrmont12:11:40

Well, thanks again!

borkdude12:11:48

but the vite plugin idea is also quite neat

👍 1
borkdude17:11:26

I want to publish a package to npm regarding squint. Bikeshedding... 

"squint-macros"
"@squint/macros"
"@squint-cljs/macros"

2️⃣ 2
3️⃣ 6
mkvlr17:11:23

I prefer the second or third

mkvlr17:11:04

slight preference for the second as it matches the GitHub org

mkvlr17:11:15

why macros? Is there also a compiler package?

borkdude17:11:55

the github org is squint-cljs

borkdude17:11:21

macros is the package that contains the applied-science/js-interop macros (and possibly more later)

❤️ 1
borkdude17:11:10

I think 2 looks better, but 3 matches the github org @U5H74UNSF

borkdude17:11:53

(the squint github org was already taken, this is why I named the org squint-cljs, the project itself is called /squint in that org though)

mkvlr17:11:47

ah yeah, so I’m for #3

mkvlr17:11:26

but #2 is also good

borkdude17:11:57

ok, can you vote like @U04V5V0V4 did ? :-D

borkdude19:11:53

ok, @squint-cljs org created, will upload package soon

Chris McCormick01:11:36

There's also an annoying packaged called squint on npm that I keep installing by accident. 😅 Luckily it fails to install with a loud error.

borkdude19:11:00

lol, it seems having a post on HN helps download statistics

awesome 5
4