Clojurians Log v2

This is the example I wanted to do in cljs/nbb: https://github.com/maticzav/ink-table#usage

Can you do a console.log with Table ? It might be nil because of the $default you might have to use

"#error {:message \"Could not resolve symbol: Table\", :data {:type :sci/error, :line nil, :column nil, :file nil, :phase \"analysis\"}}"

hmm right. you can try ["ink-table$default" :refer [Table]]?

same thing

oh right: import Table from ... is similar to $default :as Table

Can you post the whole file?

(ns instances
  (:require ["ink" :refer [render Text]]
            ["ink-table$default" :refer [Table]]
            [reagent.core :as r]))

(js/console.log Table)

{
  "dependencies": {
    "ink": "3.2.0",
    "ink-table": "3.0.0",
    "nbb": "0.7.132"
  }
}

this is the package.json

https://clojurians.slack.com/archives/C029PTWD3HR/p1660316837896909?thread_ts=1660316437.223649&cid=C029PTWD3HR

so write: "...$default" :as Table]

yay that seems to have worked 🙂

{
  Header: [Function: Header],
  Cell: [Function: Cell],
  Skeleton: [Function: Skeleton],
  default: [class Table extends Component]
}
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    at App (<path>/instances/node_modules/ink/build/components/App.js:42:9)

@dimitar.ouzounoff You might have to write :f>

hmm, no it seems Table is a React class

You only need :f> if it's a reagent component that uses hooks

or those that are written as function App () <pre>Hello</pre> right?

aka function components, I believe?

No, only reagent components that use hooks

aha

Function components that don't need reagent (hiccup or reactions) can use :>

I see!

It's all very confusing

hmm it might be closer to this example: https://github.com/babashka/nbb/blob/main/examples/react-pdf/example.cljs

confusing indeed, wasn’t as simple as I thought 🙂

It is indeed confusing. This simple example works for me:

(ns script
  (:require ["ink" :refer [render Text]]
            ["ink-table$default" :as Table]
            [reagent.core :as r]))

(defn Basic []
  [:> Text "Hello"])

(render (r/as-element [Basic]))

But this doesn't:

(defn Basic []
  [:> Table {:data (clj->js [{:name "Name 1"}
                             {:name "Name 2"}])}])

(render (r/as-element [Basic]))

yeah I had made a mistake it is (render (r/as-element [table-instances])) not (render r/as-element [table-instances])

is a keys need to be unique error?

puling reagent out of the equation:

(render (React.createElement Table (clj->js {:data [{:name "Name 1"}
                                                    {:name "Name 2"}]})))

(this still doesn't work btw)

I get the same error for:

import { render } from "ink";
import { createElement } from "react";
import Table from "ink-table";


render(createElement(Table));

oh I got it, it's that typescript stuff again

This works:

(ns script
  (:require ["ink" :refer [render Text]]
            ["ink-table$default.default" :as Table]
            [reagent.core :as r]))

(render
 (r/as-element [:> Table {:data (clj->js [{:name "Name 1"}
                                          {:name "Name 2"}])}]))

In JS:

import { render } from "ink";
import { createElement } from "react";
import Table from "ink-table";

const Basic = () => {
      return createElement(Table.default, {data: [{name: "Hello"}]});
}

render(createElement(Basic));

whoa thanks @borkdude

it works for me too 🙂

so, how do you know to require it like this? ["ink-table$default.default" :as Table]

trial and error unfortunately. When you print Table you see that it has another default property

This is usually the effect of some typescript transpilation

thanks, this is useful to know, I would have never thought to do default.default

Oops never mind. Just saw the classpath workaround in the docs.

@alvin.francis.dumalus You can specify deps in nbb.edn now as well

Ooh checking out the PR and that looks much better indeed

Note that not all deps are compatible with nbb 🤞

Yes, you can if you do "./foo.js"

Do you mean something like:

(ns dev
  (:require ["./foo.js" :refer [bar]]))

yes

Hmm getting an error if I try it:

❯ npx nbb nrepl-server :port 40000
nREPL server started on port 40000 on host 127.0.0.1 - 
(node:30355) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

Yes, this is node behavior. you can rename your file to .mjs or put "type": "module" in your package.json

Ahh that works! Thanks! I should read up on this.

The rule on Node.js is that you cannot load common JS modules (regular .js files) from ES6 modules and nbb is an ES6 module

No sorry this is wrong

You can load normal .js files but you can't use import in those

or export

Hm. I'm honestly not very well aware on the module stuff with node. But I'm assuming anything with import/export = CJS?

no wait, common js is the one with require

Anything with import / export / await = ES6 module and should end either in .mjs or the default should be set with type = module

interesting. not something I've encountered before in JS code I've worked with. We use es6 but we neither have the type set to module or use mjs. I'm assuming this has something to do with bundling as to why neither is used in code that uses import/export/await.

Too many things made easy but not simple in js land ^^;

Ahh reading up on it and it's babel doing transpiling of the es modules

At least in our case