From cc0eeb2e9af6a6c841e0ef074e5b90c69aa321fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Santanch=C3=A8?= <santanche@gmail.com>
Date: Fri, 10 Mar 2023 15:11:26 -0300
Subject: [PATCH] feat (labs): 2023-1 starting

---
 labs/2023-1/02-model/README.md                | 33 +++++++++++++++++++
 web/{lab => comparison}/README.md             |  0
 web/{lab => comparison}/dist/index-dev.html   |  2 +-
 web/{lab => comparison}/dist/index-map.html   |  2 +-
 web/{lab => comparison}/dist/index.html       |  2 +-
 web/{lab => comparison}/dist/test-pack.js     |  2 +-
 web/{lab => comparison}/js/test.js            |  0
 web/{lab => comparison}/lit/component-lit.js  |  2 +-
 .../oid/component-oid-1.js                    |  0
 .../oid/component-oid-2.js                    |  6 ++--
 .../oid/component-oid-3-private.js            |  0
 web/{lab => comparison}/package-lock.json     |  0
 web/{lab => comparison}/package.json          |  0
 .../raw/component-raw-1-element.js            |  0
 .../raw/component-raw-2-protected.js          |  0
 .../raw/component-raw-3-private.js            |  0
 web/{lab => comparison}/template/index.html   |  2 +-
 web/{lab => comparison}/webpack.config.js     |  6 ++--
 18 files changed, 45 insertions(+), 12 deletions(-)
 create mode 100644 labs/2023-1/02-model/README.md
 rename web/{lab => comparison}/README.md (100%)
 rename web/{lab => comparison}/dist/index-dev.html (100%)
 rename web/{lab => comparison}/dist/index-map.html (100%)
 rename web/{lab => comparison}/dist/index.html (95%)
 rename web/{lab => comparison}/dist/test-pack.js (99%)
 rename web/{lab => comparison}/js/test.js (100%)
 rename web/{lab => comparison}/lit/component-lit.js (96%)
 rename web/{lab => comparison}/oid/component-oid-1.js (100%)
 rename web/{lab => comparison}/oid/component-oid-2.js (85%)
 rename web/{lab => comparison}/oid/component-oid-3-private.js (100%)
 rename web/{lab => comparison}/package-lock.json (100%)
 rename web/{lab => comparison}/package.json (100%)
 rename web/{lab => comparison}/raw/component-raw-1-element.js (100%)
 rename web/{lab => comparison}/raw/component-raw-2-protected.js (100%)
 rename web/{lab => comparison}/raw/component-raw-3-private.js (100%)
 rename web/{lab => comparison}/template/index.html (94%)
 rename web/{lab => comparison}/webpack.config.js (81%)

diff --git a/labs/2023-1/02-model/README.md b/labs/2023-1/02-model/README.md
new file mode 100644
index 000000000..8943f1e9d
--- /dev/null
+++ b/labs/2023-1/02-model/README.md
@@ -0,0 +1,33 @@
+# Exploring Components
+
+## Frameworks
+* [Lit](https://lit.dev/)
+* [Hybrids](https://hybrids.js.org)
+* [Slim](https://slimjs.com)
+* [Stencil](https://stenciljs.com/)
+* [Bit](https://bit.dev/)
+* [Lightning](https://developer.salesforce.com/docs/component-library/documentation/en/lwc)
+* [React Components](https://reactjs.org/docs/react-component.html)
+* [AngularJS Components](https://reactjs.org/docs/react-component.html)
+
+## Guidelines and Catalogs
+* [Open Web Components](https://open-wc.org/)
+* [Material](https://m3.material.io/)
+
+## Catalogs
+* [Material Components](https://m3.material.io/components)
+* [Lightning](https://developer.salesforce.com/docs/component-library/overview/components)
+* [webcomponents.org](https://www.webcomponents.org/)
+* [MUI](https://mui.com/material-ui/getting-started/overview/)
+
+## Workflows
+* [Orange Widget](https://orange-widget-base.readthedocs.io/en/latest/)
+
+## Representations
+* [MDX](https://mdxjs.com/)
+* [Figma Material](https://material.io/blog/material-3-figma-design-kit)
+
+## Specializations
+* Graphic Components
+* Data Processing Components
+* ML Components
\ No newline at end of file
diff --git a/web/lab/README.md b/web/comparison/README.md
similarity index 100%
rename from web/lab/README.md
rename to web/comparison/README.md
diff --git a/web/lab/dist/index-dev.html b/web/comparison/dist/index-dev.html
similarity index 100%
rename from web/lab/dist/index-dev.html
rename to web/comparison/dist/index-dev.html
index 497f24424..e0466b847 100644
--- a/web/lab/dist/index-dev.html
+++ b/web/comparison/dist/index-dev.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   
-  <script src="../js/test.js" type="module"></script>
   <title>Oid component sample</title>
 </head>
 <body>
@@ -35,5 +34,6 @@ <h1>component-oid-3-private</h1>
     <h1>component-lit</h1>
     <component-lit name="Asdrubal"></component-lit>
   </div>
+  <script src="../js/test.js" type="module"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/lab/dist/index-map.html b/web/comparison/dist/index-map.html
similarity index 100%
rename from web/lab/dist/index-map.html
rename to web/comparison/dist/index-map.html
index 329d12b77..9105aef1e 100644
--- a/web/lab/dist/index-map.html
+++ b/web/comparison/dist/index-map.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <script type="importmap"> { "imports": {"lit": "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js"} } </script>
-  <script src="../js/test.js" type="module"></script>
   <title>Oid component sample</title>
 </head>
 <body>
@@ -35,5 +34,6 @@ <h1>component-oid-3-private</h1>
     <h1>component-lit</h1>
     <component-lit name="Asdrubal"></component-lit>
   </div>
+  <script src="../js/test.js" type="module"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/lab/dist/index.html b/web/comparison/dist/index.html
similarity index 95%
rename from web/lab/dist/index.html
rename to web/comparison/dist/index.html
index 7c0a5e67f..982e07eb8 100644
--- a/web/lab/dist/index.html
+++ b/web/comparison/dist/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   
-  <script src="test-pack.js" type="module"></script>
   <title>Oid component sample</title>
 </head>
 <body>
@@ -35,5 +34,6 @@ <h1>component-oid-3-private</h1>
     <h1>component-lit</h1>
     <component-lit name="Asdrubal"></component-lit>
   </div>
+  <script src="test-pack.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/lab/dist/test-pack.js b/web/comparison/dist/test-pack.js
similarity index 99%
rename from web/lab/dist/test-pack.js
rename to web/comparison/dist/test-pack.js
index 8024ad5a1..480f3bd17 100644
--- a/web/lab/dist/test-pack.js
+++ b/web/comparison/dist/test-pack.js
@@ -46,7 +46,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ComponentOid2\": () => (/* binding */ ComponentOid2)\n/* harmony export */ });\nclass ComponentOid2 extends HTMLElement {\n  static oid = {\n    properties: ['name']\n  }\n\n  connectedCallback () {\n    this.render()\n  }\n\n  static get observedAttributes() {\n    return this.oid.properties\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    this[name] = newValue\n  }\n\n  render () {\n    this.innerHTML = `<p>Hello, ${this.name}</p>`\n  }\n}\n\nComponentOid2.oid.properties.forEach((property) => {\n  Object.defineProperty(ComponentOid2.prototype, property, {\n    get: function() {return this['_' + property]},\n    set: function(newValue) {\n      this['_' + property] = newValue\n      this.render()\n    }\n  })\n})\n\ncustomElements.define('component-oid-2', ComponentOid2)\n\n//# sourceURL=webpack:///./oid/component-oid-2.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"ComponentOid2\": () => (/* binding */ ComponentOid2)\n/* harmony export */ });\nclass ComponentOid2 extends HTMLElement {\n  static spec = {\n    properties: ['name']\n  }\n\n  connectedCallback () {\n    this.render()\n  }\n\n  static get observedAttributes() {\n    return this.spec.properties\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    this[name] = newValue\n  }\n\n  render () {\n    this.innerHTML = `<p>Hello, ${this.name}</p>`\n  }\n}\n\nComponentOid2.spec.properties.forEach((property) => {\n  Object.defineProperty(ComponentOid2.prototype, property, {\n    get: function() {return this['_' + property]},\n    set: function(newValue) {\n      this['_' + property] = newValue\n      this.render()\n    }\n  })\n})\n\ncustomElements.define('component-oid-2', ComponentOid2)\n\n//# sourceURL=webpack:///./oid/component-oid-2.js?");
 
 /***/ }),
 
diff --git a/web/lab/js/test.js b/web/comparison/js/test.js
similarity index 100%
rename from web/lab/js/test.js
rename to web/comparison/js/test.js
diff --git a/web/lab/lit/component-lit.js b/web/comparison/lit/component-lit.js
similarity index 96%
rename from web/lab/lit/component-lit.js
rename to web/comparison/lit/component-lit.js
index cfb1bc5d8..322b600ef 100644
--- a/web/lab/lit/component-lit.js
+++ b/web/comparison/lit/component-lit.js
@@ -2,7 +2,7 @@ import {LitElement, css, html} from 'lit';
 
 export class ComponentLit extends LitElement {
   static properties = {
-    name: {},
+    name: {}
   };
   // Define scoped styles right with your component, in plain CSS
   static styles = css`
diff --git a/web/lab/oid/component-oid-1.js b/web/comparison/oid/component-oid-1.js
similarity index 100%
rename from web/lab/oid/component-oid-1.js
rename to web/comparison/oid/component-oid-1.js
diff --git a/web/lab/oid/component-oid-2.js b/web/comparison/oid/component-oid-2.js
similarity index 85%
rename from web/lab/oid/component-oid-2.js
rename to web/comparison/oid/component-oid-2.js
index 12885c127..fd32b3afd 100644
--- a/web/lab/oid/component-oid-2.js
+++ b/web/comparison/oid/component-oid-2.js
@@ -1,5 +1,5 @@
 export class ComponentOid2 extends HTMLElement {
-  static oid = {
+  static spec = {
     properties: ['name']
   }
 
@@ -8,7 +8,7 @@ export class ComponentOid2 extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return this.oid.properties
+    return this.spec.properties
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -20,7 +20,7 @@ export class ComponentOid2 extends HTMLElement {
   }
 }
 
-ComponentOid2.oid.properties.forEach((property) => {
+ComponentOid2.spec.properties.forEach((property) => {
   Object.defineProperty(ComponentOid2.prototype, property, {
     get: function() {return this['_' + property]},
     set: function(newValue) {
diff --git a/web/lab/oid/component-oid-3-private.js b/web/comparison/oid/component-oid-3-private.js
similarity index 100%
rename from web/lab/oid/component-oid-3-private.js
rename to web/comparison/oid/component-oid-3-private.js
diff --git a/web/lab/package-lock.json b/web/comparison/package-lock.json
similarity index 100%
rename from web/lab/package-lock.json
rename to web/comparison/package-lock.json
diff --git a/web/lab/package.json b/web/comparison/package.json
similarity index 100%
rename from web/lab/package.json
rename to web/comparison/package.json
diff --git a/web/lab/raw/component-raw-1-element.js b/web/comparison/raw/component-raw-1-element.js
similarity index 100%
rename from web/lab/raw/component-raw-1-element.js
rename to web/comparison/raw/component-raw-1-element.js
diff --git a/web/lab/raw/component-raw-2-protected.js b/web/comparison/raw/component-raw-2-protected.js
similarity index 100%
rename from web/lab/raw/component-raw-2-protected.js
rename to web/comparison/raw/component-raw-2-protected.js
diff --git a/web/lab/raw/component-raw-3-private.js b/web/comparison/raw/component-raw-3-private.js
similarity index 100%
rename from web/lab/raw/component-raw-3-private.js
rename to web/comparison/raw/component-raw-3-private.js
diff --git a/web/lab/template/index.html b/web/comparison/template/index.html
similarity index 94%
rename from web/lab/template/index.html
rename to web/comparison/template/index.html
index 5cd1607f6..b5cdd520b 100644
--- a/web/lab/template/index.html
+++ b/web/comparison/template/index.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <%= htmlWebpackPlugin.options.map%>
-  <script src="<%= htmlWebpackPlugin.options.lib%>" type="module"></script>
   <title>Oid component sample</title>
 </head>
 <body>
@@ -35,5 +34,6 @@ <h1>component-oid-3-private</h1>
     <h1>component-lit</h1>
     <component-lit name="Asdrubal"></component-lit>
   </div>
+  <%= htmlWebpackPlugin.options.lib%>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/lab/webpack.config.js b/web/comparison/webpack.config.js
similarity index 81%
rename from web/lab/webpack.config.js
rename to web/comparison/webpack.config.js
index 1c75ce1a8..6a94bd6ab 100644
--- a/web/lab/webpack.config.js
+++ b/web/comparison/webpack.config.js
@@ -13,21 +13,21 @@ module.exports = {
       inject: false,
       filename: 'index.html',
       template: './template/index.html',
-      lib: 'test-pack.js',
+      lib: '<script src="test-pack.js"></script>',
       map: ''
     }),
     new HtmlWebpackPlugin({
       inject: false,
       filename: 'index-map.html',
       template: './template/index.html',
-      lib: '../js/test.js',
+      lib: '<script src="../js/test.js" type="module"></script>',
       map: '<script type="importmap"> { "imports": {"lit": "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js"} } </script>'
     }),
     new HtmlWebpackPlugin({
       inject: false,
       filename: 'index-dev.html',
       template: './template/index.html',
-      lib: '../js/test.js',
+      lib: '<script src="../js/test.js" type="module"></script>',
       map: ''
     })
   ]