{"id":13801536,"url":"https://github.com/line/grow-loader","last_synced_at":"2025-05-13T11:31:21.187Z","repository":{"id":57254437,"uuid":"112283170","full_name":"line/grow-loader","owner":"line","description":"A webpack loader to split class methods by decorators","archived":true,"fork":false,"pushed_at":"2019-11-01T16:33:45.000Z","size":216,"stargazers_count":87,"open_issues_count":1,"forks_count":4,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-04-25T02:27:58.950Z","etag":null,"topics":["javascript","loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/line.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-28T03:54:10.000Z","updated_at":"2024-10-25T10:30:41.000Z","dependencies_parsed_at":"2022-08-31T09:00:16.564Z","dependency_job_id":null,"html_url":"https://github.com/line/grow-loader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fgrow-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fgrow-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fgrow-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/line%2Fgrow-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/line","download_url":"https://codeload.github.com/line/grow-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253932869,"owners_count":21986468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","loader","webpack"],"created_at":"2024-08-04T00:01:24.003Z","updated_at":"2025-05-13T11:31:18.048Z","avatar_url":"https://github.com/line.png","language":"JavaScript","readme":"# grow-loader\n\n[![Travis CI](https://travis-ci.org/line/grow-loader.svg?branch=master)](https://travis-ci.org/line/grow-loader) [![npm version](https://badge.fury.io/js/grow-loader.svg)](https://badge.fury.io/js/grow-loader)\n\nThe `grow-loader` is a webpack loader to let you split \"growable\" methods into separate files, by simply adding a decorator to the methods in class declarations.\n\nBy \"growable methods\", we mean the methods that need to be dynamically imported. To learn more about dynamic import, read [this document](https://webpack.js.org/guides/code-splitting/#dynamic-imports) from webpack.\n\nLearn more about grow-loader:\n\n- [Installing grow-loader](#installing-grow-loader)\n- [Using grow-loader](#using-grow-loader)\n- [Background story](#background-story)\n- [Contributing](#Contributing)\n- [License](#License)\n\n## Installing grow-loader\nTo install grow-loader, run the following command on your terminal.\n\n```\nnpm install --save-dev \"grow-loader\"\n```\n\n## Using grow-loader\n\n- [Getting started](#getting-started)\n- [Customizing loader options](#customizing-loader-options)\n\n### Getting started\n1. In your webpack config, add `grow-loader` _before_ the `babel-loader`.\n\n    \u003e Note. Webpack chains loaders from right to left, so to run a loader before another loader, it should be put latter. See https://webpack.js.org/configuration/module/#rule-use for more information.\n\n    **webpack.config.js**\n    ```js\n    {\n        test: /\\.jsx?$/,\n        use: [\n            'babel-loader',\n            'grow-loader'\n        ]\n    }\n    ```\n\n2. Add the `@grow` decorator to your class methods that need to \"grow\". The functions marked will be split into separate files.\n\n    ```js\n    class SampleClass {\n\n        @grow\n        methodToGrow() {\n            // ...\n        }\n\n        @grow\n        methodToGrowAndBind = () =\u003e {\n            // ...\n        }\n\n        methodToBeBundled(){\n\n        }\n    }\n    ```\n\n    If you use any linter tool before grow-loader, you may use the following import statement (which does nothing) to avoid syntax error.\n\n    ```js\n    import grow from 'grow-loader/lib/grow';\n    ```\n\n3. To install split functions back, call the `grow()` function.\n\n    ```js\n    const sample = new SampleClass();\n    console.assert(a.methodToGrow === undefined);\n    console.assert(a.methodToGrowAndBind === undefined);\n\n    sample.grow().then(() =\u003e {\n        sample.methodToGrow();\n        sample.methodToGrowAndBind();\n    });\n    ```\n\n### Customizing loader options\n\nTo avoid naming conflicts, you can customize the following grow-loader options.\n\n| Option | Default Value | Description |\n| -------|---------|-------------|\n| methodName | `grow` | The name of the method to be called before a split method. e.g. `grow()` |\n| decoratorName | `grow` | The decorator to be detected. e.g. `@grow`. |\n\nThe grow-loader options are to be defined in your webpack config or in an `import` statement.\n\n\u003e Note. Learn more about configuring loaders from the [webpack documentation on loaders](https://webpack.js.org/concepts/loaders/).\n\nThe following is an example of customizing the grow method as `myGrow()` and the decorator as `@myGrowDec`.\n\n```js\n{\n    test: /\\.jsx?$/,\n    use: [\n        'babel-loader',\n        'grow-loader?methodName=myGrow\u0026decoratorName=myGrowDec'\n    ]\n}\n```\n\n## React Component Example\nUsing grow-loader to code-split requires only a few modifications to your code. Here is an example:\n\n**Before applying grow-loader**\n\n```js\nexport default class A extends React.Component {\n\n    methodToGrow(){}\n\n    anotherMethodToGrow(){}\n\n    methodToBeBundled(){}\n\n    render(){\n        return \u003cdiv\u003e...\u003c/div\u003e\n    }\n}\n```\n\n**After applying grow-loader**\n\n```js\nclass GrowablePage extends React.Component {\n    componentDidMount() {\n        if (this.grow) {\n            this.grow().then(() =\u003e {\n                this.hasGrown = true;\n                this.forceUpdate();\n            });\n        }\n    }\n}\n\nexport default class A extends GrowablePage {\n    @grow\n    methodToGrow(){ }\n\n    @grow\n    anotherMethodToGrow(){ }\n\n    methodToBeBundled{ }\n\n    @grow\n    renderMore() {\n        return \u003cdiv\u003e...\u003c/div\u003e\n    }\n\n    render(){\n        return \u003cdiv\u003e\n            { this.hasGrown ? this.renderMore() : null }\n        \u003c/div\u003e\n    }\n}\n```\n\n## Background story\nHigher-Order Components(HOC) is a common solution in implementing code-splitting. But we found HOC solutions unsuitable for our project built with React.js.\n\n- We use different placeholder components for almost every page, but HOC solutions only support a common component for all pages.\n- Instant page transition was our ultimate goal, but the following two problems had surfaced in using HOC solutions:\n  - We organize pages in a stack—[see our blog posting on this](https://engineering.linecorp.com/en/blog/detail/235)—the hooks provided could not be easily integrated.\n  - A lot of code modifications were required. Preloading pages would help our case, but preloading costs a lot in time and management. And page transition still felt janky for long pages because of DOM manipulation.\n\nThat's why we decided to split every page into two parts:\n\n- **Basic part**: Contains placeholder components in the first view, which are to be included in the main bundle.\n- **Grown part**: Parts to be dynamically imported, and rendered after the **Basic Part**\n\nBut manually splitting files requires a heavy workload and makes methods in both parts messy. This is why we created the `grow-loader` to do it in a flexible way.\n\n## Contributing\n\nPlease check [CONTRIBUTING](./CONTRIBUTING.md) before making a contribution.\n\n## License\n\n[Apache License Version 2.0](./LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fline%2Fgrow-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fline%2Fgrow-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fline%2Fgrow-loader/lists"}