{"id":19865921,"url":"https://github.com/wclr/lp-loader","last_synced_at":"2025-09-03T08:43:54.498Z","repository":{"id":54106170,"uuid":"117816552","full_name":"wclr/lp-loader","owner":"wclr","description":"Frictionless language packs for Webpack.","archived":false,"fork":false,"pushed_at":"2021-03-09T09:49:01.000Z","size":875,"stargazers_count":14,"open_issues_count":17,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-02T05:47:01.651Z","etag":null,"topics":["demand","dynamic","i18n","l10n","language-bundle","language-packs","loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wclr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-17T09:46:32.000Z","updated_at":"2024-10-27T12:54:14.000Z","dependencies_parsed_at":"2022-08-13T06:50:38.688Z","dependency_job_id":null,"html_url":"https://github.com/wclr/lp-loader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wclr/lp-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wclr%2Flp-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wclr%2Flp-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wclr%2Flp-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wclr%2Flp-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wclr","download_url":"https://codeload.github.com/wclr/lp-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wclr%2Flp-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273416468,"owners_count":25101808,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["demand","dynamic","i18n","l10n","language-bundle","language-packs","loader","webpack"],"created_at":"2024-11-12T15:24:31.337Z","updated_at":"2025-09-03T08:43:54.466Z","avatar_url":"https://github.com/wclr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LP-Loader for Webpack\n\n\u003e Frictionless *Language Packs* for apps loaded and bundled with Webpack. Pure, conscious and flexible way of keeping and loading any kind of dictionary data dynamically on demand.\n\n*Works with Webpack 3 and 4.*\n\n## Why\n\nWebpack is really a great Packager Manager and Bundler, despite all its caveats (mostly related to configuration and performance) it gives has much more capabilities and puts less limitations on the user than any other bunder I've tried. But some (quite basic) higher level problems seem do be not solved even there.\n\nAll the methods of i18n of JS frontend apps (particularly loading/delivering language-specific usually UI-related data) I've seen out there - just ~~suck~~ could not satisfy my really basic requirements (which are mostly - simplicity and flexibility). Sounds strange, but feels like **no one knows how to make it right.** So, this package trying to approach the problem in a bit opinionated but at the same time flexible and generalized way. And this approach turned to be also useful for loading any kind of dictionary-like data sets.\n\n*Note that LP-Loader is still experimental and may probably fail to handle some particular cases (esp. if not aligned with proposed principles). But the concept has been proven and battle tested.*\n\n## What it does\n\nHere is nominal case of bundling language packs. Say you have tree components in your application that you going to bundle with webpack.\n\n```\n- app/A\n- app/B\n- app/C\n```\nFor every component you have specific language dictionary (folder with language files):\n\n```\napp/A/dict/\n  en.json\n  ru.json\n\napp/B/dict/\n  en.json\n  ru.json\n\napp/C/dict/\n  en.json\n  ru.json\n```\n\nSay you structured the app and configured Webpack to produces two bundles: \n- `bundle-AB` - contains `A` and `B` components \n- `bundle-C` - separate bundle that contains `C` component.\n\nUsing `LP-Loader` you will get separate bundles for corresponding dictionaries:\n\n```\nbundle-AB.en.lp.js  - will contain `ru` dictionaries for A and B\nbundle-AB.ru.lp.js  - will contain `en` dictionaries for A and B\n\nbundle-C.en.lp.js   - will contain `ru` dictionaries for C\nbundle-C.ru.lp.js   - will contain `en` dictionaries for C\n```\n\nParticular language bundle **will be loaded dynamically on demand** when it will be accessed from it's parent bundle code (see below). If language is not used, language data bundles are not loaded.\n\nAs stated above, `LP-Loader` can be used to bundle this way not only language specific dictionaries, but **any *labeled* sets of *data* or *code*** that need to be loaded on demand.\n\n## Installation\n\n![npm (scoped)](https://img.shields.io/npm/v/lp-loader.svg?maxAge=86400)\n\n\n```\nyarn add lp-loader [--dev]\n```\n\n## Usage\n\nThis is the example with TypeScript based dictionaries (because using TypeScript for language dictionaries data is super cool). So you have to have following files:\n\n```\napp/A/\n  A.ts        - component file\napp/A/dict/\n  en.ts      - dictionary file for `English` language\n  ru.ts      - dictionary file `Russian` language\n  index.ts   - dictionary index file\n\n```\n\nYou need to have an index file (`app/A/dict/index.ts`) for each of your dictionary folder. This file may be empty in case of `JS`, but it should exist anyway. It's bundled content will be generated while build by `lp-loader`. \n\nIn case of `TS` to have correct and useful dictionary typings code like this should be put inside:\n\n```ts\ntype Dict = { \n  /* Here goes a dictionary structure */ \n  title: string\n}\n\ndeclare const getDict: (lang: string) =\u003e Promise\u003cDict\u003e\n\nexport default getDict\n```\n\nEach language dictionary file will look like this:\n\n```ts\nimport { Dict } from '.'\n\nconst dict: Dict = { \n  title: 'Make i18n Great Again.'\n}\n\nexport default dict\n```\n\nThen you just import this file in your apps code, and use it like this:\n\n```ts\nimport getDict from './dict'\n\nlet lang = 'en'\n\n// this is how you access dictionary data for particular language\ngetDict(lang).then(dict =\u003e console.log(dict.name))\n```\n\n[*You may want to look at the example app's code.*](./app)\n\n## Configuration\n\nTo get this code working, in `webpack.config` you should define loader for dictionary index files, just like that:\n\n```ts\n    {\n      test: /dict(\\\\|\\/)index\\.ts/, \n      loaders: [\n        { loader: 'lp-loader' },\n      ]\n    }    \n```\n\n[*There are example configs in corresponding webpackX folders*](./webpack4/webpack.config.ts). Actually no difference between Webpack 3 and 4.\n\n## Loader options:\n\nYou may want to provide additional options for the loader to override the defaults.\n\n```ts\nexport interface LoaderOptions {\n  /**\n   * Name of particular label kind, default is `lp`\n   * Should use different names for different kinds of content.\n   * Label name should not contain dots.\n   */\n  name?: string,\n  /**\n   * Custom promise library name to be imported. \n   */\n  promiseLib?: string,\n  /**\n   * Target ES format for exporting loading function.\n   * Default is es6.\n   */\n  exportTarget?: 'es5' | 'es6'\n  /**\n   * Default is `exports.default = ...`\n   * If you seet empty string then export will be `exports = ` for ES5 format\n   */\n  exportName?: string\n  /**\n   * \n   * Match labeled files (tests full path), RegExp or function, \n   * By default index.* files are excluded, you may override it with this option.\n   */\n  include?: RegExp | ((filePath: string) =\u003e boolean),\n  /**\n * \n * Do not consider folders as labeled dictionary data. By default `false`\n */\n  excludeFolders?: boolean\n}\n```\n\n## Caveats\n\nThere are currently some problems with created bundle's names due to the fact that chunk/modules names are not always available when the loader performs. But this probably is going to be solved somehow.\n\n## How it works\n\nIt is quite simple. Loader finds chunk parents of the dictionary index, and generates special code that allow loading requested data on demand via `Promise` based API.\n\n[*You may want to look at the loader's code.*](./src/lp-loader.ts)\n\n## Licence\n\nWTF.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwclr%2Flp-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwclr%2Flp-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwclr%2Flp-loader/lists"}