Skip to content

Conversation

@fregante
Copy link
Member

@fregante fregante commented Nov 5, 2021

Pros

  • Readme.md becomes part of the webpack dependency tree, which means it's watched just like other files
  • No magic/global variables that need special handling (e.g. "Don't repeat the magic variable, it will be inlined multiple times")
  • More portable codebase, the loader can be more easily ported to esbuild or something
  • It makes it more clear that the data is coming from the readme - Meta: Use the Readme as the only source of feature descriptions #3678

Cons

  • A lil hacky because it doesn't use the correct webpack APIs

@fregante fregante added the meta Related to Refined GitHub itself label Nov 5, 2021
rules: [
{
test: /readme\.md?$/,
loader: './build/readme.loader.cts',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using .cts here because .ts produces .js, which is interpreted as ESM due to type:module, but webpack’s ts-node requires it. This instead produces .cjs

@@ -0,0 +1,8 @@
// Can't use modules because this is a bizarropackscript world
module.exports = async function ReadmeLoader () {
Copy link
Member Author

@fregante fregante Nov 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In reality webpack passes the readme’s content here, so it could use it instead of reading it from disk again (future PR?)

Suggested change
module.exports = async function ReadmeLoader () {
module.exports = async function ReadmeLoader (readmeText) {

module.exports = async function ReadmeLoader () {
const {getFeatures, getFeaturesMeta} = await import("./readme-parser.js");
return `
export const features = ${JSON.stringify(getFeatures())};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This in reality reads the list of enabled features from the refined-github.ts. It could be replaced by a hook that reads the files directly from webpack’s tree… but this function is also used by the feature checker…

@fregante fregante marked this pull request as ready for review November 5, 2021 21:46
// Passing `true` as the second argument makes these values dynamic — so every file change will update their value.
__features__: webpack.DefinePlugin.runtimeValue(() => JSON.stringify(getFeatures()), true),
__featuresMeta__: webpack.DefinePlugin.runtimeValue(() => JSON.stringify(getFeaturesMeta()), true),
__filebasename: webpack.DefinePlugin.runtimeValue(info => JSON.stringify(path.parse(info.module.resource).name)),
Copy link
Member Author

@fregante fregante Nov 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR welcome to drop this too

Tiny function like getFilename(import.meta.url) to replace __basefilename

@fregante fregante changed the title Meta: "import" features data from the readme Meta: drop magic globals in favor of importing the readme Nov 7, 2021
@fregante fregante merged commit 9685aaf into main Nov 7, 2021
@fregante fregante deleted the webpack-readme-loader branch November 7, 2021 11:33
@kidonng kidonng mentioned this pull request Jan 9, 2022
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

meta Related to Refined GitHub itself

Development

Successfully merging this pull request may close these issues.

Write Webpack loader for readme.md

1 participant