{"id":23440043,"url":"https://github.com/bassdman/modulerizr","last_synced_at":"2025-04-09T20:16:40.740Z","repository":{"id":33509326,"uuid":"225538705","full_name":"bassdman/modulerizr","owner":"bassdman","description":"Adds modularisation to legacy projects in a very simple way.","archived":false,"fork":false,"pushed_at":"2023-05-23T19:35:19.000Z","size":437,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T01:06:06.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bassdman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-03T05:32:33.000Z","updated_at":"2021-10-22T14:03:59.000Z","dependencies_parsed_at":"2024-10-29T18:06:38.075Z","dependency_job_id":null,"html_url":"https://github.com/bassdman/modulerizr","commit_stats":{"total_commits":138,"total_committers":3,"mean_commits":46.0,"dds":0.2681159420289855,"last_synced_commit":"f77a32f5be794a33472f9efb4240dcd563140090"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bassdman%2Fmodulerizr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bassdman%2Fmodulerizr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bassdman%2Fmodulerizr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bassdman%2Fmodulerizr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bassdman","download_url":"https://codeload.github.com/bassdman/modulerizr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247909193,"owners_count":21016479,"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":[],"created_at":"2024-12-23T15:39:37.554Z","updated_at":"2025-04-09T20:16:40.706Z","avatar_url":"https://github.com/bassdman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modulerizr\n\n\u003e Integrate a powerful, component based architecture to your legacy project in just a few steps\n\n[![npm version](https://img.shields.io/npm/v/modulerizr.svg)](https://www.npmjs.com/package/modulerizr)\n[![npm downloads](https://img.shields.io/npm/dt/modulerizr.svg)](https://www.npmjs.com/package/modulerizr)\n[![npm downloads](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/modulerizr)\n\nQuick Links\n   - [Configuration](#modulerizrconfig)\n   - [Features](#features)\n   - [Plugins](#modulerizr-plugins)\n   - [ModulerizrWebpackPlugin](https://www.npmjs.com/package/modulerizr-webpack-plugin)\n\n## Install\n\n``` shell\n    npm install modulerizr --save-dev\n```\n\n\u003c!-- - [Quicklink to the API](#api-description) --\u003e\n\n## The Problem\nWhen designing larger websites you will end up in many problems you have to challenge, like \n- very large files imports \n- overwriting css-rules, \n- overwriting/global scoped javascript-variables,\n- serverside syntax like php,jsp,... mixed with html-content\n- ...\nLet's consider the html below:\n``` html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eThis could be a legacy page in your project\u003c/title\u003e\n        \u003c!-- \n            This Stylesheet is 100kb large because it includes all the styles of your project.\n            And you just need ****** 5% oft thes styles on this page \n        --\u003e\n        \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"path/to/your/css/allStyles.css\"\u003e\n\n        \u003c!-- \n            This script all libraries you need in your project - again 95% that are not used.\n        --\u003e\n        \u003cscript src=\"path/to/global-scripts.js\"\u003e\u003c/script\u003e\n\n        \u003cstyle\u003e\n            .aPseudoLocalClass{\n                color: green\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003c!-- \n            Many legacy projects have serverside syntax in the templates PHP, jsp,... most of the time.\n            Here shown with the brackets.\n        --\u003e\n        {+include-head}\n            \u003c!-- **** There is a selector with !important to class aPseudoLocalClass in the globalStyles. Now it's pink... --\u003e\n            \u003cdiv class=\"aPseudoLocalClass\"\u003e\n                My color is pink, not green :D\n            \u003c/div\u003e\n            \u003cscript\u003e\n                ...\n                //oh, there was a global scoped variable. Now I have overwritten it an a onclick-script does does something wrong... *angry-smiley*\n                {!testmode}\n                    var color = '{{serversideColor}}';\n                {/!testmode}\n                {testmode}\n                    var color = '{{anyOtherColor}}';\n                {/testmode}\n                ...\n            \u003c/script\u003e\n        {+include-footer}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nMany solutions exist to reduce these problems in web projects, one of the most important ones is __modularisation__. \nThere are many good frameworks that use this pattern and do a veeeery, very good job with it\n - Angular\n - Vue\n - React\n - ... many other ones\n\nBUT: These Frameworks DON'T WORK GOOD WITHIN LEGACYPROJECTS. Have you ever seen Serverside-Syntax in Vue or Angular-Templates. No. If you have a legacy project and want to change it to a modular system, you will have big problems. That means you can not easily switch to modularisation when all your architecture is currently designed with php.\n\nHere's is a solutionen - where you can have serverside syntax AND modularisation without big effort.\n\n## The solution\n__Modulerizr__.\n\nWhile angular, react,... give you many great features from the scratch without having to think about it, Modulerizr does it vice versa. It gives you a simple infrastructure for modularisation and you can add the features you want.\n\nBecause of this, you can append it to almost every legacy project you can imagine. \n\n## Usage\n\nImagine the following html-page \"startpage.hml\": \n\n``` html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eStartpage\u003c/title\u003e\n        ...\n    \u003c/head\u003e\n    \u003cbody\u003e\n        {+include-head}\n            \u003c!-- **** There is a selector with !important to class aPseudoLocalClass in the globalStyles. Now it's pink... --\u003e\n            \u003ccustom-component-1\u003eSome Text from component1\u003c/custom-component1\u003e\n            \u003ccustom-component-2\u003e{{serversideText}}\u003c/custom-component2\u003e\n        {+include-footer}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\u003eThe Brackets { } show serverside syntax. It could also be php-syntax,...\n\nThe component \"custom-component-1.component.hml\":\n``` html\n\u003ctemplate name=\"custom-component1\"\u003e\n    \u003cstyle m-scoped\u003e\n        .color{color:green}\n    \u003c/style\u003e\n    \u003cscript m-scoped\u003e\n        var x = \"a scoped variable\";\n    \u003c/script\u003e\n    \u003cdiv class=\"color\"\u003e\u003cslot\u003e\u003c/slot\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\nAnd the component \"custom-component-2.component.hml\":\n``` html\n\u003ctemplate name=\"custom-component2\"\u003e\n    \u003cstyle m-scoped\u003e\n        .color{color:red}\n    \u003c/style\u003e\n    \u003cscript m-scoped\u003e\n        var x = \"another scoped variable; was not defined before\";\n    \u003c/script\u003e\n    \u003cdiv class=\"color\"\u003e\u003cslot\u003e\u003c/slot\u003e\u003c/div\u003e\n    {{Some serverside Syntax here}}\n\u003c/template\u003e\n```\n\nThen run modulerizr:\n``` javascript\nconst { modulerizr } = require('modulerizr');\n\nmodulerizr.run({\n    \"src\": [\"startpage.html\"],\n    \"components\": [\"*.component.html\"],\n    \"dest\": \"./dest/\",\n});\n```\n\u003e More ways to run modulerizr you see in the next section [\"How to run modulerizr\"](#how-to-run-modulerizr)\n\nVoilà, your're done. This will be rendered to:\n``` html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003eStartpage\u003c/title\u003e\n        ...\n    \u003c/head\u003e\n    \u003cbody\u003e\n        {+include-head}\n            \u003cdiv id=\"1e34329b\" data-v-1e34329b data-component=\"custom-component1\"\u003e\n                \u003cstyle\u003e\n                    .color[data-v-1e34329b]{color:red}\n                \u003c/style\u003e\n                \u003cscript\u003e\n                    (function(){\n                        var x = \"a scoped variable\";\n                    })();   \n                \u003c/script\u003e\n                \u003cdiv class=\"color\" data-v-1e34329b\u003eSome Text from component1\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv id=\"93d13c56\" data-v-93d13c56  data-component=\"custom-component2\"\u003e\n                \u003cstyle\u003e\n                    .color[data-v-93d13c56]{color:red}\n                \u003c/style\u003e\n                \u003cscript\u003e\n                    (function(){\n                        var x = \"another scoped variable; was not defined before\";\n                    })();   \n                \u003c/script\u003e\n                \u003cdiv class=\"color\" data-v-93d13c56\u003e{{serversideText}}\u003c/div\u003e\n                {{Some serverside Syntax here}}\n            \u003c/div\u003e\n        {+include-footer}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you need some more specials features, just [add a plugin](#plugins) that does what you need.\n\n\n## How to run modulerizr\nThere are multiple ways to run it. With Terminal or with node.\n\n### Run in Terminal\nBefore running it, add a modulerizr.config.js in the root-folder.\n``` javascript\nmodule.exports = {\n    \"src\": [\"**/*.src.html\"],\n    \"components\": [\"*.component.html\"],\n    \"dest\": \"./dest/\",\n}\n```\n\n##### Variant 1 - globally installed:\nInstall the package\n``` shell\n    npm install modulerizr --global\n```\nAnd run it\n``` shell\n    modulerizr run\n```\n##### Variant 2 - locally installed:\nInstall the package\n``` shell\n    npm install modulerizr --save-dev\n```\n\nAdd a script to the package.json\n``` javascript\n{\n    ...\n    \"scripts\": {\n        \"modulerizr\": \"modulerizr run\"\n    }\n    ...\n}\n```\nand run it \n``` shell\n    npm run modulerizr    \n```\n\n##### Commandline-Parameters\n``` shell\n    #both overwrites debug-Attribute in config\n \n    #debug mode: shows logs; \n    modulerizr --debug \n\n    #production mode: hides logs; default;\n    modulerizr --production \n```\n#### Node\nHere's how \n``` javascript\n    const { modulerizr } = require('modulerizr');\n    const config = {...} // some config\n    modulerizr.run(config)  \n```\n\n### Modulerizr.config\nYou can run one config or an array of configs\n``` javascript\n    const { modulerizr } = require('modulerizr');\n    const config1 = {...} // some config\n    const config2 = {...} // some other config\n\n    //executes one config\n    modulerizr.run(config1);\n    \n    //executes multiple configs\n    modulerizr.run([config1,config2]);\n```\n#### Config attributes\n##### src\nAll src-files that will be prerendered. They will be copied into the destination-folder. [Glob-Syntax](https://www.npmjs.com/package/glob).\nType String or Array. Required.\n``` javascript\n{\n    ...\n    // it can be a string\n    \"src\": \"**/*.allsrcfiles.html\",\n\n    //or an array of strings\n    \"src\": [\"srcfile1.html\",\"srcfile2.html\",\"srcfile3.html\"]\n    ...\n}\n```\n\n##### components\nAll component-files. [Glob-Syntax](https://www.npmjs.com/package/glob).\nType: String or Array. Optional. (But there will be a warning if you don't define it)\n``` javascript\n{\n    ...\n    // it can be a string\n    \"components\": \"**/*.component.html\",\n\n    //or an array of strings\n    \"components\": [\"comp1.component.html\",\"comp2.component.html\",\"comp3.component.html\"]\n    ...\n}\n```\n\n##### dest\nThe folder where the files will be rendered to. MUST BE AN ABSOLUTE PATH.\nType: String. Optional. Defaults to \"dest\"\n``` javascript\n{\n    ...\n    \"dest\": \"./dest\",\n    ...\n}\n```\n\n##### debug\nDebugmode. Shows logs if debug == true. \nWill be overwritten by the [--debug](#commandline-parameters) or [--production]((#commandline-parameters)) Parameter in command line.\nType: Boolean. Default: false. \n``` javascript\n{\n    ...\n    \"debug\": true,\n    ...\n}\n```\n\n##### plugins\nIf you need a custom feature, you can add it via plugin.\nType: Array. \n``` javascript\nconst { modulerizr } = require(\"modulerizr\");\n\nmodulerizr.run({\n    ...\n    //Add your plugins here\n    \"plugins\": [DebugPlugin()],\n    ...\n})\n```\n\n##### defaultComponentWrapper\nBy Default, components are wrapped by a div-tag. To change this, a component needs a \"wrapper\"-attribute or you can you can use a default-wrapper-tag for each component.\nThis will be overwritten by the tag assigned in the component.\n\n``` javascript\nconst { modulerizr } = require(\"modulerizr\");\n\nmodulerizr.run({\n    ...\n    //Now all you components will be wrapped by a span\n    \"defaultComponentWrapper\": \"span\",\n    ...\n})\n```\n\n\n##### maxRecursionLevel\nWhat happens if you add component X in component X and the content does not change? We have an infinte-loop.\n\n```html\n\u003ccomponent-a\u003e\n    \u003ccomponent-a\u003e\n        \u003ccomponent-a\u003e\n            \u003ccomponent-a\u003e\n                \u003ccomponent-a\u003e\n                    \u003ccomponent-a\u003e\n                        ...\n                    \u003c/component-a\u003e\n                \u003c/component-a\u003e\n            \u003c/component-a\u003e\n        \u003c/component-a\u003e\n    \u003c/component-a\u003e\n\u003c/component-a\u003e\n```\n\nWe assume this is not expected - that's why there is a maximum recursion level. This example above has a recurison level of 6 (until the three dots \"...\") because there are 6 levels of components.\nBy default ther is a maximumRecursionLevel of 100 - if you have more, there will be an error because we expect, that there is sth wrong.\n\nMaybe there is a usecase where you need more levels. You can increase this level in the config with the maxRecursionLevel-attribute.\n\n``` javascript\nconst { modulerizr } = require(\"modulerizr\");\n\nmodulerizr.run({\n    ...\n    //Now you can have 500 component-levels. Yippeeee\n    \"maxRecursionLevel\": \"500\",\n    ...\n})\n```\n\n## Features\nTo understand the the next features, it is good to know the differences between components and src-files:\n- Src-Files: \n   - Any html how you already use it\n   - They are the Root-Files that will be prerendered. \n   - The transpilation of these files will be added in the dest-folder\n   - Many features like scoped variables,... don't work in src-files (if you don't change this via config)\n\n- Components\n   - It is wrapped by a template-tag with some attributes\n   - Currently each component must have its own file - this will be changed in future\n   - A component can include other components\n   - All features like scoping,... work in components\n   - A component by itself won't be rendered - it (or a parent component) must be included into a src-file\n\n### Basics\n\nWithout one of the next features, a component is just outsourced html from the original file - like a php-include. So we make sure, that the rendering process does not affect legacy files.\n\nExample:\nsrc-file.html\n``` html\n\u003chtml\u003e\n    \u003chead\u003e...\u003c/head\u003e\n    \u003cbody\u003e\n        some text\n        \u003ccomponent-1\u003e\u003c/component-1\u003e\n        some text\n    \u003c/body\u003e\n\u003c/html\u003e\n```\ncomponent1.component.html\n```html\n\u003ctemplate name=\"component-1\"\u003e\n    This is component1\n\u003c/template\u003e\n```\ndest-file:\n``` html\n\u003chtml\u003e\n    \u003chead\u003e...\u003c/head\u003e\n    \u003cbody\u003e\n        some text\n        This is component1\n        some text\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nTo be honest: This feature by itself is not better then a php-include, it wouldn't make sense writing this package to add a feature that can be added without effort.\n\nLet's add some more \"magic\":\n\n### Components\nSorry, before adding \"magic\", we need the basics of components.\nA component is always wrapped by a template-tag and has a uniqe name.\n``` html\n    \u003ctemplate name=\"xyz\"\u003e\n        here comes the content\n    \u003c/template\u003e\n```\nIf the name is missing or a component with this name already exists, there will be an error.\n\u003e Until now just one component per file is possible. Also inline components in a src-file are not possible. This will change in future.\n\n#### Slots\nThe first \"magic\", well known from vue, web-components,...\nSometimes you want to do sth with the innerHTML in the component declaration.\n\n##### Default Slot:\nAnywhere in the src-file:\n```html\n...\n\u003cmake-bold\u003e\n    \u003cdiv\u003e \n        This content will be bold, even though no class or style can be seen in the src-file;\n    \u003c/div\u003e\n\u003c/make-bold\u003e\n...\n```\nIn the component file:\n```html\n    \u003ctemplate name=\"make-bold\"\u003e\n        \u003cdiv style=\"font-weight:bold;\"\u003e\n            \u003cslot\u003e\u003c/slot\u003e\n        \u003c/div\u003e\n    \u003c/template\u003e\n```\nWill be rendered to:\n```html\n...\n\u003cdiv style=\"font-weight:bold;\"\u003e\n    \u003cdiv\u003e \n        This content will be bold, even though no class or style can be seen in the src-file;\n    \u003c/div\u003e\n\u003c/div\u003e\n...\n```\n\n##### Named slots\nSometimes you need more slots per component. In this case, you can add named slots.\nAnywhere in the src-file:\n```html\n...\n\u003cbefore-and-after\u003e\n    \u003cdiv slot=\"before\"\u003e\n        This text is written before a static text.\n    \u003c/div\u003e\n    \u003cdiv slot=\"after\"\u003e\n        This text is written after a static text.\n    \u003c/div\u003e\n\u003c/before-and-after\u003e\n...\n```\nIn the component file:\n```html\n    \u003ctemplate name=\"before-and-after\"\u003e\n        \u003cdiv\u003e\u003cslot name=\"before\"\u003e\u003c/slot\u003e\u003c/div\u003e\n        \u003cdiv\u003eThis Text is in the middle\u003c/div\u003e\n        \u003cdiv\u003e\u003cslot name=\"after\"\u003e\u003c/slot\u003e\u003c/div\u003e\n    \u003c/template\u003e\n```\nWill be rendered to:\n```html\n...\n\u003cdiv\u003eThis text is written before a static text.\u003c/div\u003e\n\u003cdiv\u003eThis Text is in the middle\u003c/div\u003e\n\u003cdiv\u003eThis text is written after a static text.\u003c/div\u003e\n...\n```\n\n#### Wrapper\nRight now the default wrapper-element is a div. But for some components you may want another tag then div.\nAdd the \"wrapper\"-attribute to a component assignment to change the wrapper attribute.\n```html\n...\n\u003cmake-bold m-wrapper=\"h1\"\u003eThis is a bold header\u003c/make-bold\u003e\n...\n```\nwill be rendered to\n```html\n...\n\u003ch1 style=\"font-weight:bold;\"\u003e\n    \u003cdiv\u003e \n        This is a bold header\n    \u003c/div\u003e\n\u003c/h1\u003e\n\n\u003c!--\nInstead of \n\u003cdiv style=\"font-weight:bold;\"\u003e\n    \u003cdiv\u003e \n        This is a bold header\n    \u003c/div\u003e\n\u003c/div\u003e\n--\u003e\n...\n```\nIf you want to change the wrapper-element for all elements, [set the \"defaultComponentWrapper\"-Attribute](#defaultComponentWrapper) in the plugin-configuration.\nIf both the config attribute (\"defaultComponentWrapper\") is set and the component attribute (\"m-wrapper\"), the component attribute will be used.\n\n#### Scoped Styles\nWhat happens if you have 2 components with the same style declaration, but different value? The style will be overwritten. :(\n\n##### Problem\nComponent A\n```html\n\u003ctemplate name=\"red-text\"\u003e\n    \u003cstyle\u003e\n        .textColor{color: red;}\n    \u003c/style\u003e\n    \u003cdiv class=\"textColor\"\u003eThis Text is red.\u003c/div\u003e\n\u003c/template\u003e\n```\nComponent B\n```html\n\u003ctemplate name=\"green-text\"\u003e\n    \u003cstyle\u003e\n        .textColor{color: green;}\n    \u003c/style\u003e\n    \u003cdiv class=\"textColor\"\u003eThis Text is green.\u003c/div\u003e\n\u003c/template\u003e\n```\nSrc-file:\n```html\n...\n    \u003cred-text\u003e\u003c/red-text\u003e\n    \u003cgreen-text\u003e\u003c/green-text\u003e\n...\n```\nThis will be rendered to\n```html\n...\n\u003cstyle\u003e\n    .textColor{color: red;}\n\u003c/style\u003e\n\u003c!-- Oh no, ****. This text is green, because the text color has been overwritten in another component.--\u003e\n\u003cdiv class=\"textColor\"\u003eThis Text is red.\u003c/div\u003e\n\n\u003cstyle\u003e\n    .textColor{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\"\u003eThis Text is green.\u003c/div\u003e\n...\n```\n\n##### Solution\nIf you want scoped styles, just add a \"scoped\" attribute to the \"style\"-tag.\nComponent A\n```html\n\u003ctemplate name=\"red-text\"\u003e\n    \u003cstyle m-scoped\u003e\n        .textColor{color: red;}\n    \u003c/style\u003e\n    \u003cdiv class=\"textColor\"\u003eThis Text is red.\u003c/div\u003e\n\u003c/template\u003e\n```\nComponent B\n```html\n\u003ctemplate name=\"green-text\"\u003e\n    \u003cstyle m-scoped\u003e\n        .textColor{color: green;}\n    \u003c/style\u003e\n    \u003cdiv class=\"textColor\"\u003eThis Text is green.\u003c/div\u003e\n\u003c/template\u003e\n```\n\nThis will be rendered to\n```html\n...\n\u003cstyle\u003e\n    .textColor [data-v-12345]{color: red;}\n\u003c/style\u003e\n\u003c!-- Yaaay, this is red now - as expected:) --\u003e\n\u003cdiv data-v-12345 class=\"textColor\"\u003eThis Text is red.\u003c/div\u003e\n\n\u003cstyle\u003e\n    .textColor [data-v-67890]{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n...\n```\n\n##### Efficency \nWhat happens if you add the same component multiple times? \n```html\n..\n\u003cgreen-text\u003e\u003c/green-text\u003e\n\u003cgreen-text\u003e\u003c/green-text\u003e\n\u003cgreen-text\u003e\u003c/green-text\u003e\n...\n```\nWill the same styles exist multiple times?\n```html\n...\n\u003c!-- Will it be like this?--\u003e\n\u003cstyle\u003e\n    .textColor [data-v-67890]{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n\u003cstyle\u003e\n    .textColor [data-v-67890]{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n\u003cstyle\u003e\n    .textColor [data-v-67890]{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n...\n```\nNo. Same styleblocks with attribute \"scoped\" will just exist once. the example above would look like this:\n```html\n...\n\u003cstyle\u003e\n    .textColor [data-v-67890]{color: green;}\n\u003c/style\u003e\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n\n\u003cdiv class=\"textColor\" data-v-67890\u003eThis Text is green.\u003c/div\u003e\n...\n```\n\n#### Scoped Scripts\n\nIf you add a raw script-tag in a component, it can have  side effects to other components. Variables are global scoped and so they can overwrite other variables.\n\n##### Example\nParent-Component \n```html\n\u003ctemplate name=\"parent-component\"\u003e\n    \u003cscript\u003e\n        var text = \"Hello Parent\";\n    \u003c/script\u003e\n    \u003cchild-component\u003e\u003c/child-component\u003e\n    \u003cscript\u003e\n        console.log(text);\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n\nChild-Component \n```html\n\u003ctemplate name=\"child-component\"\u003e\n    \u003cscript\u003e\n        var text = \"Hello child\";\n        console.log(text);\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n\nThis would be rendered like this:\n```html\n\u003cscript\u003e\n    // Declaration in the parent component\n    var text = \"Hello Parent\";\n\u003c/script\u003e\n \u003cscript\u003e\n     // Declaration in the child component\n    var text = \"Hello child\";\n    console.log(text);\n\u003c/script\u003e\n\u003cscript\u003e\n    // Oh no, the text in the parent component has been overwritten. That's not expected;\n    console.log(text);\n\u003c/script\u003e\n```\nThere are two Problems:\n- the global Scope is polluted\n- variables can be overwritten what is not expected\n\n##### Solution\nScoped Scripts: Just add a \"scoped\"-Attribute to the script and this can not happen anymore.\n\nI this case, the parent component stays the same. In the child component we add a \"scoped\"-Attriubte\n\nChild-Component \n```html\n\u003ctemplate name=\"child-component\"\u003e\n    \u003cscript m-scoped\u003e\n        var text = \"Hello child\";\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n\nWould be rendered to\n```html\n\u003cscript\u003e\n    // Declaration in the parent component\n    var text = \"Hello Parent\";\n\u003c/script\u003e\n\u003cdiv id=\"12345\" data-component=\"12345\" data-v-12345\u003e\n    \u003cscript\u003e\n        (function(window){\n            // This is added when you use a \"scoped\"-Attribute. \n            //It gives you important component information in javascript.\n            var _m = {\n                id: '12345',\n                name: 'child-component',\n                $el: document.getElementById('12345'),\n                slots: {\n                    _default: \"\u003cscript m-scoped\u003evar text = \"Hello child\";\u003c/script\u003e\"\n                },\n                attributes: {\n                    \"attributeKey1\": \"attributeValue1\"\n                    ...\n                }\n            };\n\n            var text = \"Hello child\";\n            console.log(text);\n        })(window);\n    \u003c/script\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n    // As expected, \"Hello parent\" will be logged here\n    console.log(text);\n\u003c/script\u003e\n```\n\n#### One Time Rendering\nWe work on a legacyproject and the codbease has no / not many components - and many scripts are assigned via script-tag. \n\nSome scripts are only necessary for a specific features - for example jquery UI for a slider.\n\nWe can use modulerizr to only add external scripts into the src-files, when they're used in a component.\nLet's imagine a slider component that needs the external jquery-ui-lib.\n```html\n\u003ctemplate name=\"custom-slider\"\u003e\n    \u003cscript src=\"https://a-external-provider.com/jquery-ui.min.js\"\u003e\u003c/script\u003e\n    \u003clink href=\"https://a-external-provider.com/jquery-ui.min.css\"\u003e\n    \u003cdiv\u003e\n        Here we add the component elements. \n        ...\n    \u003c/div\u003e\n\u003c/template\u003e\n```\nAdding external scripts and styles in templates work as expected - but you have to take care of one scenario:\nUsing a component multiple times per page.\nImagine this:\n```html\n\u003ccustom-slider\u003e\u003c/custom-slider\u003e\n...\n\u003ccustom-slider\u003e\u003c/custom-slider\u003e\n```\nThis would be rendered to\n```html\n\u003cscript src=\"https://a-external-provider.com/jquery-ui.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://a-external-provider.com/jquery-ui.min.css\"\u003e\n\u003cdiv\u003e\n    Here we add the component elements. \n    ...\n\u003c/div\u003e\n...\n\u003c!-- Oh no, the script is loaded twice --\u003e\n\u003cscript src=\"https://a-external-provider.com/jquery-ui.min.js\"\u003e\u003c/script\u003e\n\u003c!-- \n    External Stylesheets are just loaded once per src-file.\n    \u003clink href=\"https://a-external-provider.com/jquery-ui.min.css\"\u003e \n--\u003e\n\u003cdiv\u003e\n    Here we add the component elements. \n    ...\n\u003c/div\u003e\n```\nBy default external stylesheets are just loaded once per src-file (when assigend in a component). In case of scripts you have to assign them with a \"once\"-Attribute to assure that they are just loaded once.\n\n```html\n\u003cscript m-once src=\"https://a-external-provider.com/jquery-ui.min.js\"\u003e\u003c/script\u003e\n\u003cdiv\u003e\n    Here we add the component elements. \n    ...\n\u003c/div\u003e\n```\n\nDeclared multiple times in a src-file it would be rendered like this:\n```html\n\u003cscript m-once src=\"https://a-external-provider.com/jquery-ui.min.js\"\u003e\u003c/script\u003e\n\u003cdiv\u003e\n    Here we add the component elements. \n    ...\n\u003c/div\u003e\n...\n\u003cdiv\u003e\n    Here we add the component elements. \n    ...\n\u003c/div\u003e\n```\n\n#### Component Config\nYour Component may need some specific configuration. You can add this in your component by the attribute \"m-componentconfig\". \n```html\n\u003ctemplate name=\"any-component\"\u003e\n    \u003cscript m-componentconfig\u003e\n        /*Add your component configuration here*/\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n\nThis is useful if you for example want to preload data and use it with the modulerizr-jsrender-plugin. This script must be a node script and export an object.\n\n```html\n\u003ctemplate name=\"any-component\"\u003e\n    \u003cscript m-componentconfig\u003e\n        //This data could also be fetched from anywhere else asynchronous\n        const data = {\n                    name: \"dieter\",\n                    kids: [{name:'heinz'},{name:'gustav'}]\n                };\n\n        module.exports = {\n            data(){\n                return data;\n            }\n        }\n    \u003c/script\u003e\n\u003c/template\u003e\n```\n\nThis data will also be rendered in the scoped scripts: \n```html\n \u003cscript\u003e\n    (function(window){\n        var _component = {\n            id: \"c7350017\",\n            name: \"any-component\",\n            $el: document.getElementById(\"c7350017\"),\n            data: {\"name\":\"dieter\",\"kids\":[{\"name\":\"heinz\"},{\"name\":\"gustav\",\"def\":\"ghi\"}]},\n            attributes: {},\n            slots: {\"_default\":\"\"},\n        };\n    })(window);\n\u003c/script\u003e\n```\n### Modulerizr-Plugins\nYou can use any other webpack-plugin to add more features you want, for example for bundling,... \nBut there are some specific modulerizr-plugins that exist.\n#### Modulerizr-jsrender-plugin\n The [modulerizr-jsrender-plugin](https://www.npmjs.com/package/modulerizr-jsrender-plugin) gives you the chance to add template-syntax in your templates. It is based on [JS-Render](https://www.npmjs.com/package/jsrender).\n```html\nComponent:\n\u003ctemplate name=\"jsrender-example\"\u003e\n    Hello {{:name}}.\n    {{if age\u003e 30}}\n        You are reeeeally old.\n    {{/if}}\n    {{if age \u003c= 30}}\n        In Germany they would call you \"Jungspund\".\n    {{/if}}\n\u003c/template\u003e\n\nSrc:\n\u003cdiv\u003e\n    \u003cjsrender-example name=\"Peter\" age=\"25\"\u003e\u003c/jsrender-example\u003e\n\u003c/div\u003e\n\nWill be rendered to:\n\u003cdiv\u003e\n    \u003cdiv\u003e\n        Hello Peter.\n        In Germany the would call you \"Jungspund\".\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nSee more information about this plugin [here](https://www.npmjs.com/package/modulerizr-jsrender-plugin)\n\n\n#### Use Webpack Plugins\nA Modulerizr-Plugin is just a webpack-plugin. That means, you can add any webpack plugin to customize your files. [Here's a list of webpack-plugins](https://github.com/jantimon/html-webpack-plugin#plugins), that have nothing to do with modulerizr but can also be added in the plugins.\n```javascript\n// This works:\nconst { modulerizr } = require('modulerizr');\nconst {StyleExtHtmlWebpackPlugin } = require('style-ext-html-webpack-plugin');\n    modulerizr.run({\n        //...some other config...\n        plugins: [new StyleExtHtmlWebpackPlugin()]\n    }); \n\n```\n\n#### Write your own Plugin\n[Read here how to write your own Plugins](https://github.com/bassdman/modulerizr/blob/master/README.ownplugin.md).\n\n### Features in future\n- inline-templates in src-files, marked with a \"inline-template\"-Attribute.\n- multiple components per file\n- support attribute component declarations\n- scoped link tags\n\n## Contribution\n- You have some ideas how to make modulerizr more simple?\n- You have ideas for a new feature / new modulerizr-plugin?\n- You found a bug?\n- Or you have some general demands/questions?\n\nThen [create an issue](https://github.com/bassdman/modulerizr/issues) or contact me.\nOr if you have time and a good idea, then you can of course create a new plugin. This would be awesome :D\n\n## Last but not least\nHappy Coding. Let's get rid of your legacy code in your Projects :D","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbassdman%2Fmodulerizr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbassdman%2Fmodulerizr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbassdman%2Fmodulerizr/lists"}