Fork me on GitHub
#shadow-cljs
<
2019-02-25
>
richiardiandrea18:02:59

I am on 2.8.10 has somebody started seeing the following?

[:az] Build failure:
The required JS dependency "bufferutil" is not available, it was required by "node_modules/ws/lib/BufferUtil.js".

Searched in:/home/arichiardi/git/laputa/scrutinize-fn/node_modules

You probably need to run:
  npm install bufferutil

See: 

richiardiandrea18:02:46

and

You probably need to run:
  npm install utf-8-validate

thheller18:02:26

if thats a dev build intended as a one-file output you probably want to :keep-as-require #{"ws"}

thheller18:02:33

no clue what those packages are

richiardiandrea18:02:11

so is the one-file feature causing that? because it looks like those are required by ws

thheller18:02:19

it does try to require them ... but has a fallback and seems to work without?

thheller18:02:21

try {
  const bufferUtil = require('bufferutil');
  const bu = bufferUtil.BufferUtil || bufferUtil;

  module.exports = {
    mask(source, mask, output, offset, length) {
      if (length < 48) _mask(source, mask, output, offset, length);
      else bu.mask(source, mask, output, offset, length);
    },
    unmask(buffer, mask) {
      if (buffer.length < 32) _unmask(buffer, mask);
      else bu.unmask(buffer, mask);
    },
    concat
  };
} catch (e) /* istanbul ignore next */ {
  module.exports = { concat, mask: _mask, unmask: _unmask };
}

richiardiandrea18:02:56

uhm ok let me try to uninstall and try :keep-as-require #{"ws"}

thheller18:02:58

but unless you are using ws in your release build you can safely ignore that

thheller18:02:16

or just :devtools {:enabled false}

richiardiandrea18:02:40

got it...I have one final question

richiardiandrea18:02:08

I still have a problem with one internal lib that Gcc cannot transpile

thheller18:02:15

scoping the settings to :release {:js-options {:js-provider :shadow}} would also be best probably

thheller18:02:21

no point in single file for dev really

richiardiandrea18:02:31

yeah you're right

richiardiandrea18:02:45

does :output-feature-set support :no-transpile?

thheller18:02:15

:output-feature-set :es-next will basically keep everything as is

thheller18:02:30

:no-transpile never worked

thheller18:02:06

if you use a feature the GCC doesn't support and can't parse no setting will save you

richiardiandrea18:02:46

Ok cool I have tried :es8 will try that next

thheller18:02:02

if it fails to parse it can't work since we need to process it

richiardiandrea18:02:19

Yeah I kind of guessed that ..weird is that this module comes from a TypeScript project that in theory compiles to es6

thheller18:02:02

whats the error? closure has some known issues with some ES6 code I think

richiardiandrea18:02:21

Still the one I posted on the issue let me fetch that

richiardiandrea18:02:31

> Closure compilation failed with 2 errors > --- node_modules/...dist/execution/hydration.js:48 > This code cannot be converted from ES6. Undecomposable expression: Please rewrite the yield or await as a separate statement.

thheller18:02:15

try bumping the closure compiler to [com.google.javascript/closure-compiler-unshaded "v20190215"]

thheller18:02:29

they changed something regarding that I think

thheller18:02:34

didn't test that release yet

thheller18:02:02

it isn't in the release yet

thheller18:02:35

but doesn't the language setting take care of this?

richiardiandrea18:02:13

I am trying things ...

thheller18:02:17

need minimum :es8 to keep generators/async/await as is

richiardiandrea19:02:02

this is what TypeScript produces - monkey patching facepalm

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};

...

function hydrateFrameMembersAsync(args) {
    return (agg, val) => __awaiter(this, void 0, void 0, function* () {
        const doc = yield agg;
        const docWrapper = support.createDocumentWrapper(doc, args.triggerContext || {});
        return Object.assign({}, doc, { [val.name]: yield hydrateDocumentMemberAsync(docWrapper, args.eventData, val.definition, args.lookups, args.pointer) });
    });
}

thheller19:02:42

and that still complains with :es8?

richiardiandrea20:02:24

Does shadow expose --allow_method_call_decomposing GCC option?

richiardiandrea20:02:25

I see...well I guess I will need to wait for the next release..

thheller20:02:24

hmm the code you posted compiles fine for me? I get no errors even with just :es6?

thheller20:02:04

granted that I just added it without actually using it

thheller20:02:19

but just included in a file works fine

richiardiandrea20:02:40

oh yeah well, that might be something else then

richiardiandrea21:02:48

I mean, maybe the error is in the other parts of my code

richiardiandrea18:02:47

I'll try (meeting now)

richiardiandrea20:02:10

tried many combinations of the language settings and it seems none worked, I will probably need to wait for the next release of GCC

hlolli21:02:29

has someone experienced

bidi.js:276 Uncaught SyntaxError: Invalid regular expression: /[Ö‘-Û¯Ûº-ࣿâ€�-��-�ï¬-ï·¿ï¹°-ﻼ]/: Range out of order in character class
    at new RegExp (<anonymous>)
    at bidi.js:276
from goog.i18n.bidi ?

hlolli21:02:35

also from the shadow-cljs hud, pops an error when I get an error

hud.cljs:301 reload-failed TypeError: r is not a function

thheller21:02:35

@hlolli that is caused by an incorrect charset encoding in your html

thheller21:02:57

add <meta charset="utf-8"> to your HTML

hlolli21:02:14

thanks @thheller that fixed the bidi.js error.

hlolli21:02:19

the other one probably react/reagent bug introduced after bumping, digging deeper.

thheller21:02:56

that is an error that occured while loading your code. should get it if you just reload the page

thheller21:02:04

probably nothing to do with shadow-cljs

hlolli21:02:55

Im getting "r is not a function", and the only stacktrace showing my cljs code is the init react render. Yes that hud error also gone. So all on my side now :=)

hlolli21:02:13

ok now I get what's happening, by bumping react-dropzone, the whole spec changed, and instead of using props, it expects a function callback in the child element, don't ever remember seeing such a thing in react.

<Dropzone onDrop={this.onDrop}>
        {({getRootProps, getInputProps, isDragActive}) => {
          return (
            <div
              {...getRootProps()}
weird..

lilactown22:02:59

function-as-children is a common pattern in React-land

lilactown22:02:24

see: Context Consumer components

hlolli22:02:53

it's a small webapp Im making, the whole page is a html5 filedrop, I wonder if this function as child patterns causes severe slowdown of the whole webapp, given that the whole app is a child of the filedrop. In which case, I'd just css it to do the same but be a sibling of the rest of the webapp.

hlolli22:02:35

but first time I see this, especially as an interface. Thus far, function as child has been mostly a cause of error messages 😛

lilactown22:02:20

function-as-children is pretty gross to work with in Reagent (syntax wise). but you shouldn't see a significant slow down

simple_smile 5
lilactown22:02:45

you might find that my wrapper library for React fits your use case better than reagent: https://github.com/Lokeh/hx

lilactown22:02:05

it makes using patterns like function-as-children much easier than reagent

hlolli22:02:59

it's small enough app that I can test your react wrapper. Bit off topic here, but I do get the classic: react-dom.development.js:507 Warning: Functions are not valid as a React child.

hlolli22:02:20

sorry, slack had me on overwrite mode suddenly, (so I typed forever)

hlolli22:02:31

does hx work with re-frame?

hlolli22:02:47

any react component works with re-frame, so this question falls on itself.

lilactown22:02:31

re-frame depends on reagent for it's RAtom and scheduler

lilactown22:02:55

so you'll have to include both reagent and hx, and use React-Reagent interop to use hx components in reagent and vice versa

lilactown22:02:23

I have a fork of re-frame that removes all of the reagent dependencies, but I'm not ready to publish it as an project I'm willing to support

lilactown22:02:18

there is definitely a way to use just re-frame and hx, and include reagent just for it's RAtom implementation, but I haven't tested this

hlolli22:02:36

I see, as long as hx just returns a react element, should be fine, inlineing (hx/f may not be pretty within a reagent app. For a small functioning webapp, hx makes sense.

hlolli22:02:43

speaking for myself here, as soon as state becomes big and many side effects, re-frame is a headache saver. But pure reagent I use a alot.

lilactown22:02:14

you shouldn't have to call hx/f much. using defnc will create react components for you

👍 4
richiardiandrea22:02:13

@thheller so you where saying that :no-transpile in that case above would still try to transpile? there is no way to say "please don't touch this JS"?