shadow-cljs 2022-05-21 | Slack Archive

lepistane10:05:28

I am trying to make clojure script toolbox (think of it as util functions) for a Vue.js project. I've used https://shadow-cljs.github.io/docs/UsersGuide.html#target-npm-module to successfully require that module from Vue.js and be able to use it. My only question is do i have to have ^:export before vars in order for their names to remain after compilation? I am assuming yes but just want to confirm Btw thanks a lot for shadow-cljs every time i use it my mind gets blown and my appetite for more grows

lepistane17:05:04

#Also sent to the channel

To continue on the topic... I have Vue.js project and in root folder i have /cljs folder with shadow-cljs template. So vue-project | package.json | src ... |cljs (shadow-cljs template) At the moment i am doing

.../vue-project/cljs/

npm run module

which is

"shadow-cljs release code;"

for the config

{:target :npm-module
         :output-dir "../node_modules/cljs"
         :entries [cljs-helper.util]}

After that i do

cd ..

.../vue-project/

npm run serve (which runs Vue cli "vue-cli-service serve")

Its quite annoying to have to manually to the 're-release' if i make changes in cljs Is there a chance for me to run watch along side vue "vue-cli-service serve" ? What i tried: I basically added to vue-project/package.json new script "cljs": "cd cljs-helper && npm run watch-helper", and when i run it in terminal alongside another terminal with "vue-cli-service serve" i get this in the browser:

app.js:846 Uncaught ReferenceError: process is not defined
    at eval (cljs_env.js?e979:2:1)
    at Object../node_modules/cljs/cljs_env.js (chunk-vendors.js:467:1)
    at __webpack_require__ (app.js:843:33)
    at fn (app.js:1077:21)
    at eval (cljs_helper.util.js?a539:1:1)
    at Object../node_modules/cljs/cljs_helper.util.js (chunk-vendors.js:477:1)
    at __webpack_require__ (app.js:843:33)
    at fn (app.js:1077:21)
    at eval (Schedule.vue?5f81:283:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/Schedule.vue?vue&type=script&lang=js& (app.js:530:1)

1. is there anything that can be done to run this? 2. http://2.am i missing something in order to have these things work together? 3. Is it even possible?

thheller19:05:32

hmm check the ../node_modules/cljs/cljs_env.js file

thheller19:05:43

dunno why it would be using process. might be something in your code?

thheller19:05:53

../node_modules/cljs/cljs_helper.util.js

thheller19:05:58

maybe you are using process?

thheller19:05:20

process no longer is available by default in newer build systems

thheller19:05:32

(eg. webpack)

thheller19:05:36

maybe you are trying to use js/process?

lepistane19:05:56

no process in my code this is basically the whole namespace

(ns cljs-helper.util
  (:require [cljs.pprint :as p]
            [cljs.reader :as r]))



(defn pprint [edn]
  (try
    (prn "pprinting edn...")
    (with-out-str (p/pprint (r/read-string edn)))
    (catch :default e
      (prn "Invalid EDN error pprint-ing" edn))))

#_ (pprint (str {:a {:b {:c {:d {:e 5 :ff {:f 6}}}}}}))

(defn ^:export pprintEdnString [ednString]
  (pprint ednString))

(prn "AAA")

(defn add-matches [fixtures id matches]
  (prn "fixtures: " fixtures)
  (prn "fixture-id: " id)
  (prn "list-of-matches: "  matches)
  (try
    (prn "adding-matches-to-fixture")
    (let [edn (r/read-string fixtures)]
      (assoc-in edn [id :matches] (set matches)))
    (catch :default e
      (prn "Invalid args in add-matches" fixtures id matches))))


(defn ^:export addMatches [fixtures fixture-id list-of-matches]
  (pprint (str (add-matches fixtures fixture-id list-of-matches))))

thheller19:05:36

just grep for process in the ../node_modules/cljs folder

thheller19:05:39

something must be using it

lepistane19:05:57

Sorry fro the wall of text

grep -rl "process" .
./package-lock.json
./.shadow-cljs/jar-manifest/clojurescript-1.11.51.jar.014c7fc361a498bc927c698e92b5b44761937348.manifest
./.shadow-cljs/jar-manifest/transit-js-0.8.874.jar.f8b4f570ca4d41649190efecac27a5932cc11429.manifest
./.shadow-cljs/jar-manifest/google-closure-library-0.0-20211011-0726fdeb.jar.e7c400433b3c1fadb574d4cc5a65cddccff5500f.manifest
./.shadow-cljs/jar-manifest/shadow-cljs-2.19.0-aot.jar.76fd0a8d13332a12d7ac3ea86931188b3dd03e59.manifest
./.shadow-cljs/jar-manifest/google-closure-library-third-party-0.0-20211011-0726fdeb.jar.7f1939dd0c9908d9314dd0ca4f4b89fd0ca783b8.manifest
./.shadow-cljs/builds/code/dev/ana/devtools/util.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/devtools/munging.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/devtools/hints.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/devtools/formatters/printing.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/devtools/formatters/core.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/shadow/cljs/devtools/client/shared.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/shadow/remote/runtime/shared.cljc.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/pprint.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/core/async/impl/dispatch.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/core/async.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/stacktrace.cljc.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/core.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/ana/cljs/tools/reader.cljs.cache.transit.json
./.shadow-cljs/builds/code/dev/goog-js/goog.events.event.js
./.shadow-cljs/builds/code/dev/goog-js/goog.uri.uri.js
./.shadow-cljs/builds/code/dev/goog-js/goog.uri.utils.js
./.shadow-cljs/builds/code/dev/goog-js/goog.base.js
./.shadow-cljs/builds/code/dev/goog-js/goog.html.trustedresourceurl.js
./.shadow-cljs/builds/code/dev/goog-js/goog.math.long.js
./.shadow-cljs/builds/code/dev/goog-js/goog.i18n.bidi.js
./.shadow-cljs/builds/code/dev/goog-js/goog.html.safehtml.js
./.shadow-cljs/builds/code/release/ana/cljs/pprint.cljs.cache.transit.json
./.shadow-cljs/builds/code/release/ana/cljs/core.cljs.cache.transit.json
./.shadow-cljs/builds/code/release/ana/cljs/tools/reader.cljs.cache.transit.json
./.shadow-cljs/builds/code/release/ana/reagent/core.cljs.cache.transit.json
./.shadow-cljs/builds/code/release/closure.variable.map
./node_modules/url/node_modules/punycode/punycode.js
./node_modules/shadow-cljs/cli/dist.js
./node_modules/shadow-cljs/cli/runner.js
./node_modules/safe-buffer/README.md
./node_modules/ws/lib/permessage-deflate.js
./node_modules/ws/lib/websocket.js
./node_modules/ws/lib/websocket-server.js
./node_modules/ws/lib/stream.js
./node_modules/ws/README.md
./node_modules/prop-types/checkPropTypes.js
./node_modules/prop-types/index.js
./node_modules/prop-types/factoryWithTypeCheckers.js
./node_modules/prop-types/prop-types.js
./node_modules/react/jsx-runtime.js
./node_modules/react/cjs/react-jsx-runtime.development.js
./node_modules/react/cjs/react.development.js
./node_modules/react/cjs/react-jsx-dev-runtime.development.js
./node_modules/react/index.js
./node_modules/react/umd/react.development.js
./node_modules/react/jsx-dev-runtime.js
./node_modules/timers-browserify/CHANGELOG.md
./node_modules/assert/test.js
./node_modules/assert/node_modules/util/test/node/log.js
./node_modules/assert/node_modules/util/test/node/debug.js
./node_modules/assert/node_modules/util/util.js
./node_modules/shadow-cljs-jar/bin/shadow-cljs.jar
./node_modules/constants-browserify/test.js
./node_modules/node-libs-browser/index.js
./node_modules/node-libs-browser/package.json
./node_modules/node-libs-browser/README.md
./node_modules/safer-buffer/Readme.md
./node_modules/safer-buffer/Porting-Buffer.md
./node_modules/safer-buffer/safer.js
./node_modules/pbkdf2/lib/async.js
./node_modules/pbkdf2/lib/default-encoding.js
./node_modules/setimmediate/setImmediate.js
./node_modules/punycode/punycode.js
./node_modules/source-map-support/source-map-support.js
./node_modules/source-map-support/README.md
./node_modules/source-map-support/browser-source-map-support.js
./node_modules/scheduler/tracing.js
./node_modules/scheduler/cjs/scheduler-unstable_mock.development.js
./node_modules/scheduler/cjs/scheduler-tracing.development.js
./node_modules/scheduler/cjs/scheduler.development.js
./node_modules/scheduler/index.js
./node_modules/scheduler/unstable_mock.js
./node_modules/scheduler/tracing-profiling.js
./node_modules/sha.js/test/vectors.js
./node_modules/sha.js/bin.js
./node_modules/process-nextick-args/index.js
./node_modules/process-nextick-args/package.json
./node_modules/process-nextick-args/readme.md
./node_modules/process/index.js
./node_modules/process/package.json
./node_modules/process/README.md
./node_modules/process/test.js
./node_modules/process/browser.js
./node_modules/stream-http/lib/response.js
./node_modules/stream-http/lib/request.js
./node_modules/stream-http/README.md
./node_modules/stream-http/test/server/index.js
./node_modules/stream-http/test/browser/abort.js
./node_modules/readline-sync/lib/readline-sync.js
./node_modules/readline-sync/lib/encrypt.js
./node_modules/readline-sync/README.md
./node_modules/react-dom/cjs/react-dom-unstable-fizz.node.development.js
./node_modules/react-dom/cjs/react-dom-test-utils.development.js
./node_modules/react-dom/cjs/react-dom.development.js
./node_modules/react-dom/cjs/react-dom-unstable-fizz.browser.development.js
./node_modules/react-dom/cjs/react-dom-server.node.development.js
./node_modules/react-dom/cjs/react-dom-server.browser.development.js
./node_modules/react-dom/cjs/react-dom-unstable-native-dependencies.development.js
./node_modules/react-dom/index.js
./node_modules/react-dom/unstable-native-dependencies.js
./node_modules/react-dom/test-utils.js
./node_modules/react-dom/umd/react-dom.development.js
./node_modules/react-dom/umd/react-dom-server.browser.development.js
./node_modules/react-dom/umd/react-dom-unstable-native-dependencies.development.js
./node_modules/react-dom/unstable-fizz.browser.js
./node_modules/react-dom/server.browser.js
./node_modules/react-dom/unstable-fizz.node.js
./node_modules/react-dom/profiling.js
./node_modules/react-dom/server.node.js
./node_modules/pako/lib/zlib/trees.js
./node_modules/pako/lib/zlib/inftrees.js
./node_modules/pako/lib/zlib/inflate.js
./node_modules/pako/lib/utils/strings.js
./node_modules/pako/lib/inflate.js
./node_modules/pako/dist/pako_inflate.js
./node_modules/pako/dist/pako.js
./node_modules/pako/dist/pako_deflate.js
./node_modules/buffer/test/write.js
./node_modules/buffer/test/from-string.js
./node_modules/buffer/test/is-buffer.js
./node_modules/buffer/test/to-string.js
./node_modules/buffer/test/methods.js
./node_modules/buffer/test/write_infinity.js
./node_modules/buffer/test/base64.js
./node_modules/buffer/test/constructor.js
./node_modules/buffer/test/basic.js
./node_modules/buffer/test/slice.js
./node_modules/buffer/test/compare.js
./node_modules/buffer/test/static.js
./node_modules/buffer/bin/download-node-tests.js
./node_modules/buffer/bin/test.js
./node_modules/react-is/cjs/react-is.development.js
./node_modules/react-is/index.js
./node_modules/builtin-status-codes/browser.js
./node_modules/crypto-browserify/test/index.js
./node_modules/crypto-browserify/example/bundle.js
./node_modules/readable-stream/writable.js
./node_modules/readable-stream/package.json
./node_modules/readable-stream/lib/_stream_readable.js
./node_modules/readable-stream/lib/internal/streams/destroy.js
./node_modules/readable-stream/lib/_stream_transform.js
./node_modules/readable-stream/lib/_stream_duplex.js
./node_modules/readable-stream/lib/_stream_writable.js
./node_modules/readable-stream/node_modules/safe-buffer/README.md
./node_modules/readable-stream/GOVERNANCE.md
./node_modules/readable-stream/readable.js
./node_modules/source-map/lib/source-node.js
./node_modules/source-map/CHANGELOG.md
./node_modules/source-map/dist/source-map.debug.js
./node_modules/source-map/dist/source-map.js
./node_modules/source-map/dist/source-map.min.js.map
./node_modules/miller-rabin/bin/miller-rabin
./node_modules/path-browserify/index.js
./node_modules/path-browserify/test/test-path.js
./node_modules/util/util.js
./node_modules/which/bin/which
./node_modules/which/which.js
./node_modules/randombytes/browser.js
./node_modules/isexe/index.js
./node_modules/isexe/test/basic.js
./node_modules/isexe/windows.js
./node_modules/isexe/mode.js
./node_modules/browserify-zlib/yarn.lock
./node_modules/browserify-zlib/karma.conf.js
./node_modules/browserify-zlib/lib/index.js
./node_modules/browserify-zlib/lib/binding.js
./node_modules/browserify-zlib/src/index.js
./node_modules/browserify-zlib/src/binding.js
./node_modules/create-react-class/factory.js
./node_modules/create-react-class/create-react-class.js
./node_modules/loose-envify/cli.js
./node_modules/loose-envify/index.js
./node_modules/loose-envify/package.json
./node_modules/loose-envify/README.md
./node_modules/loose-envify/replace.js
./node_modules/loose-envify/loose-envify.js
./node_modules/browserify-sign/node_modules/readable-stream/experimentalWarning.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_readable.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/internal/streams/async_iterator.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/internal/streams/destroy.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_transform.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_duplex.js
./node_modules/browserify-sign/node_modules/readable-stream/lib/_stream_writable.js
./node_modules/browserify-sign/node_modules/readable-stream/GOVERNANCE.md
./node_modules/browserify-sign/node_modules/readable-stream/readable.js
./node_modules/events/tests/special-event-names.js
./node_modules/events/tests/events-once.js
./node_modules/events/tests/check-listener-leaks.js
./node_modules/hash-base/node_modules/readable-stream/experimentalWarning.js
./node_modules/hash-base/node_modules/readable-stream/lib/_stream_readable.js
./node_modules/hash-base/node_modules/readable-stream/lib/internal/streams/async_iterator.js
./node_modules/hash-base/node_modules/readable-stream/lib/internal/streams/destroy.js
./node_modules/hash-base/node_modules/readable-stream/lib/_stream_transform.js
./node_modules/hash-base/node_modules/readable-stream/lib/_stream_duplex.js
./node_modules/hash-base/node_modules/readable-stream/lib/_stream_writable.js
./node_modules/hash-base/node_modules/readable-stream/GOVERNANCE.md
./node_modules/hash-base/node_modules/readable-stream/readable.js
./node_modules/randomfill/browser.js

thheller19:05:30

only the node_modules/cljs/*.js folder. not everything

lepistane19:05:58

node_modules/cljs$ grep -rl "process"

devtools.formatters.printing.js
cljs.core.js
cljs.pprint.js
cljs.core.async.impl.dispatch.js.map
devtools.util.js
devtools.hints.js
devtools.hints.js.map
cljs.stacktrace.js
cljs.tools.reader.js.map
cljs-runtime/cljs.core.js
cljs-runtime/goog.i18n.bidi.js.map
cljs-runtime/goog.html.safehtml.js.map
cljs-runtime/goog.html.trustedresourceurl.js.map
cljs-runtime/goog.uri.utils.js.map
cljs-runtime/goog.base.js
cljs-runtime/goog.uri.uri.js.map
cljs-runtime/cljs.core.js.map
cljs-runtime/goog.base.js.map
cljs-runtime/goog.math.long.js.map
cljs.core.async.js
devtools.munging.js.map
devtools.formatters.core.js
shadow.cljs.devtools.client.shared.js.map
cljs.core.async.impl.dispatch.js
devtools.formatters.core.js.map
devtools.util.js.map
devtools.formatters.printing.js.map
cljs.pprint.js.map
devtools.munging.js
shadow.remote.runtime.shared.js.map
cljs.core.async.js.map
cljs.stacktrace.js.map
cljs.core.js.map
shadow.cljs.devtools.client.shared.js
shadow.remote.runtime.shared.js
cljs_env.js
cljs.tools.reader.js

thheller19:05:00

well I guess process is a little too generic

maybe process.

identical output

process\. I guess?

grep -rl "process\."
cljs.core.js
cljs-runtime/cljs.core.js
cljs-runtime/goog.i18n.bidi.js.map
cljs-runtime/goog.uri.utils.js.map
cljs_env.js

thheller19:05:31

what is using process in cljs_env.js?

lepistane19:05:55

first 3 lines

1 var $CLJS = {};
2 var CLJS_GLOBAL = process.browser ? (typeof(window) != 'undefined' ? window : self) : global;
3 var CLOSURE_DEFINES = CLJS_GLOBAL.CLOSURE_DEFINES = $CLJS.CLOSURE_DEFINES = ....

thheller19:05:44

oh doh. forgot that exists 😛

thheller19:05:21

https://stackoverflow.com/questions/41359504/webpack-bundle-js-uncaught-referenceerror-process-is-not-defined

thheller19:05:34

maybe that works as a workaround?

lepistane19:05:45

checking

thheller19:05:49

I guess I can add a check there if process is actually defined first

lepistane20:05:45

i apologize but i don't have webpack config in root vue project or in cljs one

thheller20:05:17

https://cli.vuejs.org/guide/webpack.html

lepistane20:05:09

👀

lepistane20:05:50

vue.config.js

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {
    css: {
        sourceMap: true
    },
    productionSourceMap: false,
    publicPath:  '/',


    configureWebpack: {
	plugins: [
	    // fix "process is not defined" error:
	    // (do "npm install process" before running the build)
	    new webpack.ProvidePlugin({
		process: 'process/browser',
	    }),
	]
    }

};

i ran

npm install process

npm run serve

> [email protected] serve /home/marko/clojure/hudstats/dreamhack-nhl
> vue-cli-service serve

 INFO  Starting development server...


 ERROR  Failed to compile with 1 error                               10:37:30 PM

 error  in ./src/views/Schedule.vue?vue&type=script&lang=js&

Module not found: Error: Can't resolve 'cljs/cljs_helper.util' in '/home/marko/clojure/hudstats/dreamhack-nhl/src/views'

ERROR in ./src/views/Schedule.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/Schedule.vue?vue&type=script&lang=js&) 295:11-43
Module not found: Error: Can't resolve 'cljs/cljs_helper.util' in '/home/marko/clojure/hudstats/dreamhack-nhl/src/views'
 @ ./src/views/Schedule.vue?vue&type=script&lang=js& 1:0-244 1:260-263 1:265-506 1:265-506
 @ ./src/views/Schedule.vue 2:0-60 3:0-55 3:0-55 10:2-8
 @ ./src/router.js 4:0-44 16:15-23
 @ ./src/main.js 8:0-30 29:10-16

webpack compiled with 1 error

lepistane20:05:24

Scratch that... I should pay more attention

lepistane20:05:48

#Also sent to the channel

First i need to run

npm run cljs

AKA
  "cljs": "cd cljs-helper && npm run watch-helper",
AKA
	"watch-helper": "shadow-cljs watch code;",

first and then

npm run serve

AKA
"serve": "vue-cli-service serve",

[solved] :thumbsup: @thheller thanks a lot!!!

thheller13:05:37

@lepistane yes, :npm-module requires ^:export since it can't know what you are going to use otherwise

👍 1

thheller13:05:06

you could also the newer :target :esm which lets you control this via build config instead https://clojureverse.org/t/generating-es-modules-browser-deno/6116

lepistane17:05:04

replied to a thread:I am trying to make clojure script toolbox (think of it as util functions) for a Vue.js project. I've used https://shadow-cljs.github.io/docs/UsersGuide.html#target-npm-module to successfully require that module from Vue.js and be able to use it. My only question is do i have to have `^:export` before vars in order for their names to remain after compilation? I am assuming yes but just want to confirm Btw thanks a lot for shadow-cljs every time i use it my mind gets blown and my appetite for more grows :gratitude:

.../vue-project/cljs/

npm run module

which is

"shadow-cljs release code;"

for the config

{:target :npm-module
         :output-dir "../node_modules/cljs"
         :entries [cljs-helper.util]}

After that i do

cd ..

.../vue-project/

npm run serve (which runs Vue cli "vue-cli-service serve")

app.js:846 Uncaught ReferenceError: process is not defined
    at eval (cljs_env.js?e979:2:1)
    at Object../node_modules/cljs/cljs_env.js (chunk-vendors.js:467:1)
    at __webpack_require__ (app.js:843:33)
    at fn (app.js:1077:21)
    at eval (cljs_helper.util.js?a539:1:1)
    at Object../node_modules/cljs/cljs_helper.util.js (chunk-vendors.js:477:1)
    at __webpack_require__ (app.js:843:33)
    at fn (app.js:1077:21)
    at eval (Schedule.vue?5f81:283:1)
    at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/views/Schedule.vue?vue&type=script&lang=js& (app.js:530:1)

1. is there anything that can be done to run this? 2. http://2.am i missing something in order to have these things work together? 3. Is it even possible?

lepistane20:05:48

First i need to run

npm run cljs

AKA
  "cljs": "cd cljs-helper && npm run watch-helper",
AKA
	"watch-helper": "shadow-cljs watch code;",

first and then

npm run serve

AKA
"serve": "vue-cli-service serve",

[solved] :thumbsup: @thheller thanks a lot!!!

nivekuil23:05:41

is there a shadow+clojure tools docker image somewhere? want to set up a reproducible cljc dev environment

nivekuil02:05:03

:main-opts ["-m" "shadow.cljs.devtools.cli" "server"] with the tools-deps image seems to be the way

2022-05-21

Channels