Fork me on GitHub
#clojurescript
<
2020-10-29
>
Markus Str12:10:35

Is there a canonical way to develop and test browser extensions with cljs? We're currently using chromex+shadow-cljs to develop and tests+puppeter to mock the browser; but that's still very far away from REPL-driven dev

unbalanced13:10:03

Are you testing the browser APIs or just the effect on the web page?

unbalanced13:10:38

This isn't a canonical answer by any stretch but boy do I get a ton of mileage of chrepl: https://www.chrepl.app/

🔥 3
unbalanced13:10:25

You can at least test most of the logic you would need on a page. I don't think it gives you access to the browser APIs but I'm not sure

unbalanced13:10:35

Figwheel, though, I think

Markus Str14:10:43

Thank you! We currently use #dirac for that and it's great so far. You're right if we separate the concerns about 80% is repl-able

unbalanced19:10:48

I just want to clarify, chrepl is very different. It lets you use the repl from your editor

unbalanced19:10:04

And you can load in arbitrary libraries or an arbitrary project.

unbalanced19:10:24

It's like developing your own page but... using someone else's html/css. It works on any webpage, not just the page you are developing

Markus Str14:10:24

ahh I see. Will give it a look - thanks for the pointer

dnolen14:10:12

@strasser.ms couldn't you make a REPL server that runs in the extension?

dnolen14:10:53

if you focus on the core functionality this is not that hard to implement - you can improve it later.

Markus Str14:10:55

Yes, we have a REPL in the chrome developer console running (dirac); it's just annoying to always have to reload the page when you recompile the extension code. If we developed our new code directly in the REPL it would work, but then we don't get the nice IDE features ofc

Markus Str14:10:06

ahh the trade-offs 🙂

dnolen14:10:11

I mean REPL server that runs inside the extension

dnolen14:10:20

then you would get a REPL driven dev

dnolen14:10:40

this is not as complicated as it sounds

dnolen14:10:58

you get JavaScript from ClojureScript over a connection - and you eval - that's almost all there is too it

darwin15:10:44

@strasser.ms a few years back when I was developing a chrome extension in cljs figwheel worked for me to do live code update on code changes, the only problem was with content scripts

Markus Str15:10:36

@dnolen thanks yes I think that's what we have since today! (intellij remote REPL where dirac has access to namespace) @darwin that's a good setup yes. We got the same hot reloading working now with #shadow-cljs. So yes, the only problem left is the content-script - for every change in there we have to reload the page. We're currently setting up a headless chrome with Puppeter for that; will report back how it works

Markus Str17:10:16

will try that out. Thank you!

Gleb Posobin01:10:54

Content scripts do get updated for me without reload, with shadow cljs.

Gleb Posobin01:10:31

The only problem is when you navigate to another page, chrome loads the initial content script the extension started with.

Markus Str14:10:57

Yes that seems to be it

Markus Str15:10:25

@UQ4RJ22EA have you found a way to reload to background script on file save? So that you don't have to reload the tab/extension?

Gleb Posobin17:10:49

Background script does get reloaded for me on save.

thinking-face 3
dnolen15:10:44

ah, sorry wasn't clear from what you said earlier that the issue was more specific

Markus Str15:10:13

my bad; thanks for your help

cap10morgan17:10:11

I have a webworker entrypoint in a target bundle project, but I'm not sure what the right way to configure the build is since :bundle and :webworker are different values of the :target key. It seems like I need to combine the two. Anyone have experience with this?

unbalanced17:10:33

encountering a... situation. When stringifying this json file, what would you expect the resulting javascript object to be (in ClojureScript)?

{"@testing-library/react": "^9.3.2",
 "react": "^16.13.1"}
for me it is
#js {:react "^9.3.2"}
and that's turning out to be rather problematic

unbalanced18:10:11

this is node, btw. Relevant code:

(-> (str cwd "/" app-name "/package.json")
     fs-read-file!
     <p!
     .toString
      js/JSON.parse)
does anyone have any suggestions for alternatives to js/JSON.parse that won't trash the keys or perhaps leave them as strings?

lilactown18:10:19

Is the result of .toString correct?

lilactown18:10:26

Try logging that out

unbalanced18:10:38

actually seems like it's a problem even when it's just at fs-read-file!, which is just

(def fs-read-file! (promisify (.-readFile fs)))

unbalanced18:10:51

=> #object[Buffer {
  "eslintConfig": {
    "extends": "react-app"
  },
  "private": true,
  "name": "myapp",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "run-scripts test:unit test:lint test:build",
    "eject": "react-scripts eject",
    "test:build": "run-scripts build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom"
  },
  "registry": "",
  "access": "public",
  "version": "0.1.0",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "eslint-config-standard-react": "^9.2.0",
    "react-cron-generator": "^1.2.6",
    "eslint-plugin-import": "^2.18.2",
    "babel-eslint": "^10.0.3",
    "react": "^9.3.2",
    "cypress": "^4.12.0",
    "eslint-plugin-node": "^11.0.0",
    "typescript": "^4.0.2",
    "react-redux": "^7.1.3",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "user-event": "^7.1.2",
    "cross-env": "^7.0.2",
    "antd": "^4.5.2",
    "prettier": "^2.0.4",
    "react-icons": "^3.10.0",
    "react-scripts": "3.4.3",
    "eslint-plugin-standard": "^4.0.1",
    "run-scripts": "^0.4.0",
    "eslint": "^6.8.0",
    "react-dom": "^16.13.1",
    "jest-dom": "^4.2.4",
    "toolkit": "^1.1.0",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-promise": "^4.2.1",
    "react-moment": "^0.9.7",
    "eslint-plugin-prettier": "^3.1.1"
  }
}]

unbalanced18:10:03

notice that the keys are already trashed

orestis18:10:04

Are you sure you’re reading the correct file?

unbalanced18:10:11

100% sure. original file:

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^4.5.2",
    "babel-eslint": "^10.0.3",
    "cross-env": "^7.0.2",
    "cypress": "^4.12.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.7.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-config-standard-react": "^9.2.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-standard": "^4.0.1",
    "prettier": "^2.0.4",
    "react": "^16.13.1",
    "react-cron-generator": "^1.2.6",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-moment": "^0.9.7",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.3",
    "run-scripts": "^0.4.0",
    "typescript": "^4.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "run-scripts test:unit test:lint test:build",
    "eject": "react-scripts eject",
    "test:build": "run-scripts build",
    "test:lint": "eslint .",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "access": "public"
}

unbalanced18:10:12

copy/paste problems

unbalanced18:10:34

The key details is "react" and "@testing-library/react" get trashed, with the former losing the "namespace qualifier" or whatever and overwriting "react"

unbalanced18:10:10

I'll try a different tool for reading files and see if that goes better

unbalanced19:10:33

interesting. same problem with a different tool

unbalanced19:10:59

this most excellent library did the trick: https://github.com/pkpkpk/cljs-node-io

orestis18:10:45

I still can’t see how reading a file and getting back a buffer would do any JSON processing let alone trample data :thinking_face:

unbalanced19:10:44

thank you @pkpkpk, whoever you are. for solving my problem ☝️ https://github.com/pkpkpk/cljs-node-io