@polight/lego

Version:

Tiny Web-Components lib for future-proof HTML mentors

5 lines (4 loc) • 15.6 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/assets/css/just-the-docs-default.css"> <script src="/assets/js/vendor/lunr.min.js"></script> <script src="/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Configuring compilation for Web-Components | 🚀 Lego Web-Components</title> <meta name="generator" content="Jekyll v4.2.2" /> <meta property="og:title" content="Configuring compilation for Web-Components" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="The compiler can take serveral parameters: sourceDir, destDist, watch… These will allow you to fine grain your configuration when compiling. The full list of parameters is available in the compiler config. You should see that file to know the exhaustive list of parameters and what they do. You can either setup each of these values from a custom config file or directly from the command line arguments. Setup a Custom Configuration File Create a lego.config.js file at the root of your project with the following: export default { // Your custom settings here } This file will override the default config.js settings when declared. If your /lego.config.js file is not found, please ensure to have "type": "module" in your package.json file in order to read .js files as modules. ⚠️ Missing lego.config.js file, building with defaults. If reading in the console, it means the /lego.config.js was not found in the root folder of the project from where the compiler is called. It’s very fine if you don’t need to customize configuration and run with defaults. Configuring on compile time Passing parameters in the CLI will override default parameters and custom configuration. The command line accepts the following parameters: npx lego <sourceDir> <destDir> <options>. The only option for now is -w (stading for the watch config property)." /> <meta property="og:description" content="The compiler can take serveral parameters: sourceDir, destDist, watch… These will allow you to fine grain your configuration when compiling. The full list of parameters is available in the compiler config. You should see that file to know the exhaustive list of parameters and what they do. You can either setup each of these values from a custom config file or directly from the command line arguments. Setup a Custom Configuration File Create a lego.config.js file at the root of your project with the following: export default { // Your custom settings here } This file will override the default config.js settings when declared. If your /lego.config.js file is not found, please ensure to have "type": "module" in your package.json file in order to read .js files as modules. ⚠️ Missing lego.config.js file, building with defaults. If reading in the console, it means the /lego.config.js was not found in the root folder of the project from where the compiler is called. It’s very fine if you don’t need to customize configuration and run with defaults. Configuring on compile time Passing parameters in the CLI will override default parameters and custom configuration. The command line accepts the following parameters: npx lego <sourceDir> <destDir> <options>. The only option for now is -w (stading for the watch config property)." /> <link rel="canonical" href="http://localhost:4000/v1/configuring-components/" /> <meta property="og:url" content="http://localhost:4000/v1/configuring-components/" /> <meta property="og:site_name" content="🚀 Lego Web-Components" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2023-03-03T20:30:45+01:00" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Configuring compilation for Web-Components" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2023-03-03T20:30:45+01:00","datePublished":"2023-03-03T20:30:45+01:00","description":"The compiler can take serveral parameters: sourceDir, destDist, watch… These will allow you to fine grain your configuration when compiling. The full list of parameters is available in the compiler config. You should see that file to know the exhaustive list of parameters and what they do. You can either setup each of these values from a custom config file or directly from the command line arguments. Setup a Custom Configuration File Create a lego.config.js file at the root of your project with the following: export default { // Your custom settings here } This file will override the default config.js settings when declared. If your /lego.config.js file is not found, please ensure to have "type": "module" in your package.json file in order to read .js files as modules. ⚠️ Missing lego.config.js file, building with defaults. If reading in the console, it means the /lego.config.js was not found in the root folder of the project from where the compiler is called. It’s very fine if you don’t need to customize configuration and run with defaults. Configuring on compile time Passing parameters in the CLI will override default parameters and custom configuration. The command line accepts the following parameters: npx lego <sourceDir> <destDir> <options>. The only option for now is -w (stading for the watch config property).","headline":"Configuring compilation for Web-Components","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/v1/configuring-components/"},"url":"http://localhost:4000/v1/configuring-components/"}</script>  </head> <link rel="stylesheet" href="/assets/css/style.css" /> <body> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header"> <a href="http://localhost:4000/" class="site-title lh-tight"> 🚀 Lego </a> <a href="#" id="menu-button" class="site-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav"> <div class="nav-category">Documentation</div> <ul class="nav-list"><li class="nav-list-item"><a href="http://localhost:4000/v1/" class="nav-list-link">Welcome</a></li><li class="nav-list-item"><a href="http://localhost:4000/v1/getting-started/" class="nav-list-link">Getting Started</a></li><li class="nav-list-item"><a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a><a href="http://localhost:4000/v1/usage-web-components/" class="nav-list-link">Usage</a><ul class="nav-list "><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/template/" class="nav-list-link">Template tag</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/condition/" class="nav-list-link">Condition :if</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/loop/" class="nav-list-link">Loop :for</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/custom-directive/" class="nav-list-link">Custom directives</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/events/" class="nav-list-link">Binding events</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/reactive/" class="nav-list-link">Reactive properties</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/attributes/" class="nav-list-link">Pass attributes</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/slots/" class="nav-list-link">Using slots</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/reactive-css/" class="nav-list-link">Reactive CSS</a></li><li class="nav-list-item "><a href="http://localhost:4000/v1/usage-web-components/script-tag/" class="nav-list-link">Script Tag</a></li></ul></li><li class="nav-list-item"><a href="http://localhost:4000/v1/naming-components/" class="nav-list-link">Naming Conventions</a></li><li class="nav-list-item"><a href="http://localhost:4000/v1/compile-components/" class="nav-list-link">Compiling</a></li><li class="nav-list-item active"><a href="http://localhost:4000/v1/configuring-components/" class="nav-list-link active">Configuring</a></li><li class="nav-list-item"><a href="http://localhost:4000/v1/advanced-components/" class="nav-list-link">Advanced Example</a></li><li class="nav-list-item"><a href="http://localhost:4000/v1/testing-components/" class="nav-list-link">Testing</a></li><li class="nav-list-item"><a href="http://localhost:4000/v1/advanced-webcomponents/" class="nav-list-link">Getting deep</a></li></ul> </nav> <footer class="site-footer"> <p>Version 1.8 stable</p> <p>Based on <a href="https://jekyllrb.com/">Jekyll</a> and <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>.</p> </footer> </div> <section class="main banner warning"> You are viewing the documentation for Lego v1. <a href="/v2/">Lego v2</a> is coming out! <a href="/v2/">Visit the new documentation</a>. </section> </section> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search"> <div class="search-input-wrap"> <input type="search" id="search-input" class="search-input" tabindex="0" placeholder="Search the Lego documentation" aria-label="Search " autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> </div> <div id="main-content-wrap" class="main-content-wrap"> <div id="main-content" class="main-content" role="main"> <p>The compiler can take serveral parameters: <code class="language-plaintext highlighter-rouge">sourceDir</code>, <code class="language-plaintext highlighter-rouge">destDist</code>, <code class="language-plaintext highlighter-rouge">watch</code>…</p> <p>These will allow you to fine grain your configuration when compiling.</p> <p>The full list of parameters is available in the <a href="https://github.com/Polight/lego/blob/master/src/compiler/config.js#L1">compiler config</a>. You should see that file to know the exhaustive list of parameters and what they do.</p> <p>You can either setup each of these values from a custom config file or directly from the command line arguments.</p> <h2 id="setup-a-custom-configuration-file"> <a href="#setup-a-custom-configuration-file" class="anchor-heading" aria-labelledby="setup-a-custom-configuration-file"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Setup a Custom Configuration File </h2> <p>Create a <em>lego.config.js</em> file at the root of your project with the following:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>export default { // Your custom settings here } </code></pre></div></div> <p>This file will override the default <a href="https://github.com/Polight/lego/blob/master/src/compiler/config.js#L1">config.js</a> settings when declared.</p> <blockquote> <p>If your <em>/lego.config.js</em> file is not found, please ensure to have <code class="language-plaintext highlighter-rouge">"type": "module"</code> in your package.json file in order to read <code class="language-plaintext highlighter-rouge">.js</code> files as modules.</p> </blockquote> <h3 id="️--missing-legoconfigjs-file-building-with-defaults"> <a href="#️--missing-legoconfigjs-file-building-with-defaults" class="anchor-heading" aria-labelledby="️--missing-legoconfigjs-file-building-with-defaults"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> ⚠️ Missing lego.config.js file, building with defaults. </h3> <p>If reading in the console, it means the <em>/lego.config.js</em> was not found in the root folder of the project from where the compiler is called.</p> <p>It’s very fine if you don’t need to customize configuration and run with defaults.</p> <h2 id="configuring-on-compile-time"> <a href="#configuring-on-compile-time" class="anchor-heading" aria-labelledby="configuring-on-compile-time"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Configuring on compile time </h2> <p>Passing parameters in the CLI will override default parameters and custom configuration.</p> <p>The command line accepts the following parameters: <code class="language-plaintext highlighter-rouge">npx lego <sourceDir> <destDir> <options></code>. The only option for now is <code class="language-plaintext highlighter-rouge">-w</code> (stading for the <code class="language-plaintext highlighter-rouge">watch</code> config property).</p> <hr> <footer> <p class="text-small text-grey-dk-100 mb-0">Lego is <a href=https://github.com/polight/lego>open-source</a>. Distributed under <a href="https://github.com/polight/lego/tree/master/LICENSE.txt">MIT license.</a></p> <div class="d-flex mt-2"> </div> </footer> </div> </div> <a href="#" id="search-button" class="search-button"> <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg> </a> <div class="search-overlay"></div> </div> </body> </html>