`js/*` completion does not work with react native js runtime

[introom]

I can get completions with browser runtime, but no luck with react native runtime.

Wanna confirm if react native is supported here.

I am on Calva with shadowcljs.

[vemv]

Most likely not. Anyway what is a "react native runtime"? Where does it run (a phone, an emulator, sth else)? Where can I learn about its shadowcljs integration?

The key question is - does https://github.com/nrepl/piggieback provide an "env" akin to cljs.repl.node.NodeEnv whenever we're connected to ReactNative? What's its class name?

Any insight appreciated @bbatsov @thheller

[introom]

Most likely not. Anyway what is a "react native runtime"? Where does it run (a phone, an emulator, sth else)? Where can I learn about its shadowcljs integration?

I was testing on an iphone simulator. The runtime is named javascript core: https://reactnative.dev/docs/javascript-environment.

also cc @PEZ I opened an issue here.

[PEZ]

I just tried with this project https://github.com/PEZ/rn-rf-shadow

There is no completion on the js namespace happening, regardless if I try with the web build or the iOS Simulator.

The repl message log has this:

-> sent
{
  op: 'complete',
  ns: 'example.app',
  symbol: 'j',
  id: '92',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  context: '(__prefix__)',
  'enhanced-cljs-completion?': 't'
}

-> sent
{
  op: 'complete',
  ns: 'example.app',
  symbol: 'j',
  id: '93',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  context: '(__prefix__)',
  'enhanced-cljs-completion?': 't'
}

<- received
{
  completions: [
    { candidate: 'js*', ns: 'cljs.core', type: 'special-form' },
    { candidate: 'juxt', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-in', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-fn?', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-mod', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-obj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-str', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js->clj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-keys', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-delete', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-invoke', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-comment', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-symbol?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-debugger', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-reserved', ns: 'cljs.core', type: 'var' },
    { candidate: 'js-arguments', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-iterable?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-inline-comment', ns: 'cljs.core', type: 'macro' }
  ],
  id: '93',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

<- received
{
  completions: [
    { candidate: 'js*', ns: 'cljs.core', type: 'special-form' },
    { candidate: 'juxt', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-in', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-fn?', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-mod', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-obj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-str', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js->clj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-keys', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-delete', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-invoke', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-comment', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-symbol?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-debugger', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-reserved', ns: 'cljs.core', type: 'var' },
    { candidate: 'js-arguments', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-iterable?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-inline-comment', ns: 'cljs.core', type: 'macro' }
  ],
  id: '92',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

-> sent
{
  op: 'ns-list',
  id: '94',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  'filter-regexps': []
}

<- received
{
  id: '94',
  'ns-list': [
    'cider.nrepl.inlined-deps.suitable.v0v4v1.suitable.js-introspection',
    'cljs.core',
    'cljs.pprint',
    'cljs.repl',
    'cljs.spec.alpha',
    'cljs.spec.gen.alpha',
    'cljs.tools.reader',
    'cljs.tools.reader.impl.commons',
    'cljs.tools.reader.impl.errors',
    'cljs.tools.reader.impl.inspect',
    'cljs.tools.reader.impl.utils',
    'cljs.tools.reader.reader-types',
    'cljs.user',
    'clojure.core.protocols',
    'clojure.data',
    'clojure.datafy',
    'clojure.set',
    'clojure.string',
    'clojure.walk',
    'cognitect.transit',
    'example.app',
    'example.db',
    'example.events',
    'example.subs',
    'example.widgets',
    'expo.root',
    're-frame.cofx',
    're-frame.core',
    're-frame.db',
    're-frame.events',
    're-frame.fx',
    're-frame.interceptor',
    're-frame.interop',
    're-frame.loggers',
    're-frame.registrar',
    're-frame.router',
    're-frame.settings',
    're-frame.std-interceptors',
    're-frame.subs',
    're-frame.trace',
    're-frame.utils',
    'reagent.core',
    'reagent.debug',
    'reagent.impl.batching',
    'reagent.impl.component',
    'reagent.impl.input',
    'reagent.impl.protocols',
    'reagent.impl.template',
    'reagent.impl.util',
    'reagent.ratom',
    'shadow.cljs.devtools.client.env',
    'shadow.cljs.devtools.client.react-native',
    'shadow.cljs.devtools.client.shared',
    'shadow.cljs.devtools.client.websocket',
    'shadow.expo.keep-awake',
    'shadow.remote.runtime.api',
    'shadow.remote.runtime.cljs.js-builtins',
    'shadow.remote.runtime.eval-support',
    'shadow.remote.runtime.obj-support',
    'shadow.remote.runtime.shared',
    'shadow.remote.runtime.tap-support',
    'shadow.remote.runtime.writer'
  ],
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

-> sent
{
  op: 'info',
  ns: 'example.app',
  symbol: 'js*',
  id: '95',
  session: '27970109-893d-4a83-845b-59b0b98fc775'
}

<- received
{
  id: '95',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done', 'no-info' ]
}

-> sent
{
  op: 'complete',
  ns: 'example.app',
  symbol: 'js',
  id: '96',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  context: '(__prefix__)',
  'enhanced-cljs-completion?': 't'
}

<- received
{
  completions: [
    { candidate: 'js*', ns: 'cljs.core', type: 'special-form' },
    { candidate: 'js-in', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-fn?', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-mod', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-obj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-str', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js->clj', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-keys', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-delete', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-invoke', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-comment', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-symbol?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-debugger', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-reserved', ns: 'cljs.core', type: 'var' },
    { candidate: 'js-arguments', ns: 'cljs.core', type: 'macro' },
    { candidate: 'js-iterable?', ns: 'cljs.core', type: 'function' },
    { candidate: 'js-inline-comment', ns: 'cljs.core', type: 'macro' }
  ],
  id: '96',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

-> sent
{
  op: 'ns-list',
  id: '97',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  'filter-regexps': []
}

<- received
{
  id: '97',
  'ns-list': [
    'cider.nrepl.inlined-deps.suitable.v0v4v1.suitable.js-introspection',
    'cljs.core',
    'cljs.pprint',
    'cljs.repl',
    'cljs.spec.alpha',
    'cljs.spec.gen.alpha',
    'cljs.tools.reader',
    'cljs.tools.reader.impl.commons',
    'cljs.tools.reader.impl.errors',
    'cljs.tools.reader.impl.inspect',
    'cljs.tools.reader.impl.utils',
    'cljs.tools.reader.reader-types',
    'cljs.user',
    'clojure.core.protocols',
    'clojure.data',
    'clojure.datafy',
    'clojure.set',
    'clojure.string',
    'clojure.walk',
    'cognitect.transit',
    'example.app',
    'example.db',
    'example.events',
    'example.subs',
    'example.widgets',
    'expo.root',
    're-frame.cofx',
    're-frame.core',
    're-frame.db',
    're-frame.events',
    're-frame.fx',
    're-frame.interceptor',
    're-frame.interop',
    're-frame.loggers',
    're-frame.registrar',
    're-frame.router',
    're-frame.settings',
    're-frame.std-interceptors',
    're-frame.subs',
    're-frame.trace',
    're-frame.utils',
    'reagent.core',
    'reagent.debug',
    'reagent.impl.batching',
    'reagent.impl.component',
    'reagent.impl.input',
    'reagent.impl.protocols',
    'reagent.impl.template',
    'reagent.impl.util',
    'reagent.ratom',
    'shadow.cljs.devtools.client.env',
    'shadow.cljs.devtools.client.react-native',
    'shadow.cljs.devtools.client.shared',
    'shadow.cljs.devtools.client.websocket',
    'shadow.expo.keep-awake',
    'shadow.remote.runtime.api',
    'shadow.remote.runtime.cljs.js-builtins',
    'shadow.remote.runtime.eval-support',
    'shadow.remote.runtime.obj-support',
    'shadow.remote.runtime.shared',
    'shadow.remote.runtime.tap-support',
    'shadow.remote.runtime.writer'
  ],
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

-> sent
{
  op: 'info',
  ns: 'example.app',
  symbol: 'js*',
  id: '98',
  session: '27970109-893d-4a83-845b-59b0b98fc775'
}

<- received
{
  id: '98',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done', 'no-info' ]
}

-> sent
{
  op: 'complete',
  ns: 'example.app',
  symbol: 'js/',
  id: '99',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  context: '(__prefix__)',
  'enhanced-cljs-completion?': 't'
}

<- received
{
  completions: [],
  id: '99',
  session: '27970109-893d-4a83-845b-59b0b98fc775',
  status: [ 'done' ]
}

[vemv]

Well that doesn't seem too bad, at least you're getting completions for cljs.core etc, right?

[PEZ]

No, it is not too bad. All ClojureScript stuff works. Just a bit less on the JS side, where at least I get some completions in regular node and browser projects.

[vemv]

Taking a look at suitable.compliment.sources.cljs, it seems like there isn't a special handling of the "js" namespace.

Perhaps in for most js runtimes, the cljs analyzer creates a js namespace that can be successfully used by Suitable, but not so much for the RN runtime?

i.e. we're using an abstraction which would break here.

Merely an hypothesis though.

[vemv]

I'd be happy to take over a PR that introduced the following:

• setup RN for local development and/or CircleCI
  • (most importantly, CircleCI)
• a green test for e.g. cljs.core/, using the RN runtime
• Preferrably, a red test for js/

Without those, it's very much unlikely that this issue will get spontaneously fixed - I don't do cljs dev nowadays, much less RN dev. Maintenance is scarce in this project.

However as said I'd quite happily pick up said PR and hunt for the actual issue.

[vemv]

As one last note, the https://github.com/clojure-emacs/clj-suitable/blob/8ec4258709d3a41f3cdd51c646674e0dba80219d/src/main/suitable/js_introspection.cljs cljs namespace is very much self-contained, see its comment form.

You should be able to run it for the RN runtime and check if e.g. (-> js/window property-names-and-types pprint) is returning anything at all.

[PEZ]

Thanks! Yeah, self-contained indeed. I played around with that yesterday for an unrelated thing.

[PEZ]

@vemv That returns very similar stuff to what I get in the browser.