Unfork Microbundle?

[developit]

Hi there,

We've started getting issues opened against Microbundle from CRL users, but it's hard to help people when they're using an undocumented fork of the codebase - I don't know how customized microbundle-crl is or what upstream versions each release corresponds to, so I can't really debug it.

I know maintenance is a burden, so if you'd be open to it I thought it might be worth exploring whether the customizations you have in the fork could be rolled back into Microbundle so you don't have to maintain a whole separate codebase. If you have a list of what has been changed, that'd be a good place to start.

[transitive-bullshit]

Hey @developit, I'd very much prefer to unfork microbundle.

The changes in microbundle-crl are very minor and focus on bundling React + CSS + assets in a few ways that standard microbundle doesn't handle very well.

The specific changes are documented at the top of the readme's fork here: https://github.com/transitive-bullshit/microbundle

I'd be more than happy to work with you to figure out the best path forward to make sure that these fairly simple use cases work with standard microbundle, at which point I'll kill microbundle-crl.

Thanks!

[q-kirill]

Hi @transitive-bullshit @developit , I have faced with one major problem, not sure whom I can contact first. There is an issue with one dependency rollup-plugin-postcss that has an issue with css bundling. It can either bundle css modules, or regular css, making impossible to use both (e.g. css modules in library, and import css from the thirdparty). Please refer to this issue https://github.com/developit/microbundle/issues/653. The problem is that in original microbundle repo this dependency was updated, but it still not updated in microbundle-crl. @transitive-bullshit what are your plans around create-react-library and microbundle-crl? @developit do you have a plan to include React support into the original microbundle?

[developit]

Microbubble supports React already. It should be possible to switch between the two.

[developit]

The following dependencies and .babelrc should make Microbundle work like microbundle-crl:

npm i -D @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-decorators babel-plugin-inline-react-svg babel-plugin-file-loader

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "React.createElement",
      "pragmaFrag": "React.Fragment"
    }],
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-decorators",
    "inline-react-svg",
    ["babel-plugin-file-loader", {
      "publicPath": "./",
      "outputPath": "./"
    }]
  ]
}

[hedleysmith]

+1 for this, bringing in microbundle's latest features (e.g inline css) would be super useful and solve a number of other issues, e.g https://github.com/transitive-bullshit/create-react-library/issues/333

[mic0108]

The following dependencies and .babelrc should make Microbundle work like microbundle-crl:

npm i -D @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-decorators babel-plugin-inline-react-svg babel-plugin-file-loader

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "React.createElement",
      "pragmaFrag": "React.Fragment"
    }],
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-decorators",
    "inline-react-svg",
    ["babel-plugin-file-loader", {
      "publicPath": "./",
      "outputPath": "./"
    }]
  ]
}

After adding above configuration Im getting below error now (babel plugin) Error: Cannot find module 'babel-plugin-transform-react-jsx' Require stack:

• test-lib/node_modules/@babel/core/lib/config/files/plugins.js
• test-lib//node_modules/@babel/core/lib/config/files/index.js
• test-lib//node_modules/@babel/core/lib/index.js
• test-lib//node_modules/@rollup/plugin-babel/dist/index.js
• test-lib//node_modules/microbundle/dist/cli.js
• Did you mean "@babel/transform-react-jsx"?

[icameron]

Add the babel-plugin-transform-react-jsx

npm i -D @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-decorators babel-plugin-inline-react-svg babel-plugin-file-loader babel-plugin-transform-react-jsx

then update the .babelrc

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment"
      }
    ],
    "@babel/plugin-proposal-optional-chaining",   
    "inline-react-svg",
    [
      "babel-plugin-file-loader",
      {
        "publicPath": "./",
        "outputPath": "./dist/assets"
      }
    ]
  ]
}

[mic0108]

Thanks @icameron ..I added @babel/plugin-transform-react-jsx earlier and got below error:

The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option.

Adding { "legacy": true } as you mentioned above might fix this error but I removed whole babel config and instead updated build scripts like below and everything worked :

"scripts": {
        "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
        "start": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement",
        ...
}

[mr-ristic]

You can use my fork for typescript template, react 17 and other dependencies are updated, tests are working and I switched it from microbundle-crl to microbundle. I changed the code style and lint rules though... https://github.com/mr-ristic/create-react-library

[gkr-bot]

Any update on this?

[ecarradal]

You can use my fork for typescript template, react 17 and other dependencies are updated, tests are working and I switched it from microbundle-crl to microbundle. I changed the code style and lint rules though... https://github.com/mr-ristic/create-react-library

Hey @mr-ristic! Nice fork!! I have a question :( How can I use .svg in a library componente?

[mr-ristic]

You can use my fork for typescript template, react 17 and other dependencies are updated, tests are working and I switched it from microbundle-crl to microbundle. I changed the code style and lint rules though... https://github.com/mr-ristic/create-react-library

Hey @mr-ristic! Nice fork!! I have a question :( How can I use .svg in a library componente?

Hey @ecarradal, thanks. I used this to create an ui-kit library, so I have a lot of svg's with dynamic props. In my use case the best solution was to import them as components. You even have vscode plugin(SVGR) that can convert svgs into components.