Clojurians Log v2

Thank you, that was the other one I was considering too 🙂

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

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

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

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

Figwheel, though, I think

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

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

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

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

ahh the trade-offs 🙂

I mean REPL server that runs inside the extension

then you would get a REPL driven dev

this is not as complicated as it sounds

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

@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

@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

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

my bad; thanks for your help

not sure if this article is still relevant: https://medium.com/@wilkerlucio/setting-up-figwheel-for-chrome-extensions-content-scripts-f1631d8e782a

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?

will try that out. Thank you!

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"}

#js {:react "^9.3.2"}

this is node, btw. Relevant code:

(-> (str cwd "/" app-name "/package.json")
     fs-read-file!
     <p!
     .toString
      js/JSON.parse)

Is the result of .toString correct?

Try logging that out

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)))

=> #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": "<https://artifacts.rackspace.net/artifactory/api/npm/sbdevs-npm-local/>",
  "access": "public",
  "version": "0.1.0",
  "browserslist": {
    "production": [
      "&gt;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"
  }
}]

notice that the keys are already trashed

fascinating

Are you sure you’re reading the correct file?

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"
}

ugh hang on

copy/paste problems

fixed.

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

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

interesting. same problem with a different tool

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

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

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

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

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