Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 02 2020 14:55
    matteobortolazzo commented #448
  • May 02 2020 05:40
    bebraw commented #448
  • May 01 2020 21:03
    matteobortolazzo commented #448
  • Feb 02 2019 22:45
    danielhamngren opened #448
  • Nov 18 2018 04:43
    McWatt commented #447
  • Sep 27 2018 18:26
    bebraw commented #447
  • Sep 27 2018 17:45
    jordancclive opened #447
  • Mar 13 2018 16:18
    skarlinski commented #446
  • Mar 13 2018 15:33
    bebraw commented #446
  • Mar 13 2018 15:32

    bebraw on master

    fix(language-features): Drop we… Removed redundant spread operat… Merge pull request #446 from sk… and 2 more (compare)

  • Mar 13 2018 15:32

    bebraw on v2.5.13

    (compare)

  • Mar 13 2018 15:32

    bebraw on dev

    chore: Bump version 2.5.13 (compare)

  • Mar 13 2018 15:29

    bebraw on dev

    Removed redundant spread operat… Merge pull request #446 from sk… (compare)

  • Mar 13 2018 15:29
    bebraw closed #446
  • Mar 12 2018 17:50
    skarlinski opened #446
  • Mar 07 2018 14:47

    bebraw on dev

    fix(language-features): Drop we… (compare)

  • Mar 07 2018 14:46

    bebraw on dev

    chore: Thank @skarlinski chore: Bump version 2.5.12 (compare)

  • Feb 26 2018 08:55
    bebraw commented #445
  • Feb 26 2018 08:54

    bebraw on master

    Changed `const` to `let` in es6… Merge pull request #445 from sk… chore: Thank @skarlinski and 2 more (compare)

  • Feb 26 2018 08:54

    bebraw on v2.5.12

    (compare)

Juho Vepsäläinen
@bebraw
:+1:
Juho Vepsäläinen
@bebraw
here's more info about this year's React Finland, https://react-finland.fi/blog/rf21-call-for-participants/
@AlexSergey could you cycle the post or https://forms.gle/SeVygg8wEcXsANsB7 amongst your networks so we can get more replies? thanks :smile:
Juho Vepsäläinen
@bebraw
Lakeisha
@1ak31sha
how about thrive instead of just survive
thank you for the documentation but it really just feels like enough to survive only
Juho Vepsäläinen
@bebraw
yeah - i should give esp. the react book a bigger pass :)
i did a heavy update on the webpack book a while ago so it's on webpack 5
Phanio Phrero
@phaniophrero
Hello everyone , is there someone who did a range slider that shows an array of text values inside a thumb label like in this image ?
Screenshot_1.png
Juho Vepsäläinen
@bebraw
@phaniophrero i remember doing some custom components like this - i think you cannot do this one with a native component and it has to be pure react most likely. let me try to find something that would be flexible enough :)
@phaniophrero check https://github.com/tajo/react-range - you can override the thumb
NickWoodward
@NickWoodward

Hi @bebraw, was just wondering if you'd ever seen an update/fix to webpack cause a problem with fs? I went from a working build, ran npm audit fix (because I'm an idiot), and now node just complains that it can't resolve fs. It's been marked as a duplicate on stackoverflow, with someone stating that fs can't be run in the browser, but as far as I know I've never tried to do that?

Just thought you might have some insight on it. The link is here if you do get a chance, understand if you don't though :)

https://stackoverflow.com/questions/68068097/ran-npm-audit-fix-now-get-module-not-found-error-cant-resolve-fs

NickWoodward
@NickWoodward
I've now managed to update most of the packages, which fixed that problem, but stuck with Error: Child compilation failed: Module not found: Error: Can't resolve ./spritesheet.svg which I assume means that my svg-sprite-loader/svgo-loader packages aren't playing nicely with webpack 5. Lots of reading for me - if only someone had written a book on it :D
Juho Vepsäläinen
@bebraw
there are a bunch of react related workshops coming up at React Finland this year (30.08-03.09), https://react-finland.fi/
pgnd
@pgnd

My site uses Twig templating; .twig layout files are compiled to HTML for rendering.
My site uses SCSS; .scss assets are compiled to CSS for styling.

I run webpack5. Asset bundling works as expected.

My config's split, following the usual SurviveJS book method,

https://survivejs.com/webpack/developing/composing-configuration/

In current config, when I make a change to .scss asset files, background

    webpack --mode=development --progress --watch

picks up the changes and rebundles.

I'm attempting to add a watcher for twig file; i.e., when I make a layout change in a twig template, and save, I want the webpack exec to, similarly, rebundle -- but only the actual to-be-bundled assets.

For that, I'm looking at adding Webpack's native watcher

https://webpack.js.org/configuration/watch/

In my split config, I start setting it up with

webpack.config.js
    const commonConfig = merge([
        ...
        parts.Watcher(),

        {
            stats: {
             ...
    ...
    const getConfig = (mode) => {
        process.env.NODE_ENV = mode;
        switch (mode) {
            case 'production':
                return merge(commonConfig, prodConfig, { mode });
            case 'development':
                return merge(commonConfig, devConfig, { mode });
            default:
                throw new Error(`Trying to use an unknown mode, ${mode}`);
        }
    };
    module.exports = getConfig(mode);

and then

webpack.parts.js

    ...
    exports.Watcher = () => ({
        watch: true,
        watchOptions: {
            aggregateTimeout: 200,
            poll: 1000,
        },
    });
    ...

With that^ config, since .twig files are not path-declared in 'entry: {', as they're not bundle-able assets themselves, changes to .twig files are ignore, and do not, atm, trigger a webpack rebuild.

What's a sane/correct approach in my split-config to just watch for twig-file changes, to trigger the rebuild?

Juho Vepsäläinen
@bebraw
the problem is that the template is an indirect dependency so webpack cannot track it automatically. how are you referring to your twig templates right now? depending on how that's done, maybe it's possible to fix this at mini-html-webpack-plugin now that i think of it
if it's within a templating function, then it's not possible
but even then a bit of api to declare the templates could be added so you don't need the other plugin
pgnd
@pgnd

@bebraw Atm, it's a Laravel site, with Twig support's added via a composer-installed php addon (rcrowe/twigbride) ; i.e., in a templating function. Sounds like 'webpack-add-dependency-plugin' may be right 1st step ...

Wasn't aware of it. Looking now at the plugin. Thx!

pgnd
@pgnd
... IIUC, webpack-add-dependency-plugin expects a list of explicit files, in std webpack fashion. Does it accept path globs? e.g., I'd like to watch for changes in all .twig under a specific dir (recursive watch, including subdirs)
i suppose 'globby' could help, if it's not "in" the plugin
pgnd
@pgnd

this split/merged config, using globby

webpack.config.js
    ...
    const PATHS = {
        twigs: path.join(__dirname, 'resources/views/templates'),
    };
    const watchPaths = globby.sync([
        `${PATHS.twigs}/**/*`,
    ]);
    const commonConfig = merge([
        parts.Watcher(`${watchPaths}`),
    ...

and

webpack.parts.js
    ...
    const { AddDependencyPlugin } = require('webpack-add-dependency-plugin');
    exports.Watcher = (watchPaths) => ({
        plugins: [
            new AddDependencyPlugin({
                path: watchPaths,
            }),
        ],
    });
    ...

does compile with no errors.
but, any change to *.twig under

`${PATHS.twigs}/**/*`

is not tracked/detected. no webpack rebundle is triggered.
something's still missing :-/

Juho Vepsäläinen
@bebraw
@pgnd a static glob would still miss file additions. i think something more robust might be needed. the plugin itself doesn't do much. it's possible it has broken since webpack 5 (i think i haven't used it there yet)
there's another way that's a bit hacky - you could have an entry point where you import your twig templates
you don't have to do anything with the files. all that would do is to make webpack aware of them
to make it dynamic, you could use a require.context
pgnd
@pgnd
@bebraw I haven't messed with dynami-loading/require.context so far. Taking a look now. Thx.
I generally prefer a simple, single-task plugin for such tasks -- in this case, a 'watch any of these files/paths/globs for changes'. The separation of function/task is easier to manage; the webpack-native integrations can get messy quickly!
the entry point is also an option, functionally. need to make sure the templates don't get bundled into my prod build files ...
pgnd
@pgnd
entry point approach needs a loader for the .twig types; guess a raw-loader, maybe ...
Juho Vepsäläinen
@bebraw
yeah, it should be enabled only for development. i would maybe process through https://www.npmjs.com/package/null-loader
it would be enough as only thing you want to do here is not to crash
pgnd
@pgnd
@bebraw a globby.sync def'd *twig entry point, using null-loader appears to do the trick. no add'l 'webpack-add-dependency-plugin' plugin needed.
Juho Vepsäläinen
@bebraw
cool :+1:
pgnd
@pgnd
thxalot ::wave:: !
Juho Vepsäläinen
@bebraw
i think i'll add a note of the technique to the book the next time i work on it :+1:
pgnd
@pgnd

I'm attempting to import both a function & variable for use in my webpack process flow

_myvars1.scss
    $color_grey_medium: hsl(0, 0%, 70.6%);
    @function hsl-to-rgb($hsl-color) {
        @return mix($hsl-color,$hsl-color);
    }

_myvars2.scss
    @import 'myvars1';
    .test {
        --bs-light-rgb: hsl-to-rgb($color_grey_medium);
    }

with this webpack-merge split config

https://pastebin.com/KFS13BLF

everything 'else' has been working well for quite awhile; webpack'ing without issue.

but, THIS^ attempt @ a function-using-a-variable import fails with

SyntaxError
    precss: ... Could not resolve the variable "$color_grey_medium" within "hsl-to-rgb($color_grey_medium)"

this

precss-import-variables

suggests adding 'postcss-variables-loader' & excludes into the mix ...

So far, my various config add'ns haven't worked &/or break things.
I'm first looking for a SurviveJS book-based clever solution

IS there something "in the book" that addresses this^? &/or an obvious fix, ideally minimally-modding my existing merged/split config?

Juho Vepsäläinen
@bebraw
@pgnd i don't think i have anything specific. you could try to process css without webpack to prove the postcss plugin setup you have works
it could be some kind of a weird ordering issue too
@pgnd fwiw, i have a working variable setup at https://github.com/ReactFinland/site but i haven't touched the config in a long while
if you don't have to support older browsers, then going via CSS variables would be a neat way to solve it
pgnd
@pgnd

@bebraw

Yeah, too many moving parts ... need to de-couple.
rm'ing webpack is always 'fun', as I've got manifests, versioning, etc all wrapped around my workflow; can be challenging to unwind it all.

This shouldn't be this finicky, and should JustWork(tm).
Ideally without having to throw additional plugins (e.g. postcss-variables-loader) at it.

I don't need to worry about older browsers ...

Juho Vepsäläinen
@bebraw
@pgnd ok, i would definitely look into CSS Variables then. the best thing is that you can do theming on top of that with a bit of JS later if you want
also dark mode
pgnd
@pgnd
@bebraw Still need to get a function to consume a var though ... which is what's causing the choke.
Will spin up a test site, and see what workaround I can manage. Thx!
pgnd
@pgnd
@bebraw migrated all my usage to CSS vars. solves the issue, much cleaner. thx 4 the pointer!
Juho Vepsäläinen
@bebraw
cool :+1:
one benefit is that it's not coupled with tooling - it just works