feat (labs): 2023-1 starting

santanche · Mar 10, 2023 · cc0eeb2 · cc0eeb2
1 parent ea7815a
commit cc0eeb2
Show file tree

Hide file tree

Showing 18 changed files with 45 additions and 12 deletions.
diff --git a/labs/2023-1/02-model/README.md 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
diff --git a/web/lab/README.md → web/comparison/README.md b/web/lab/README.md → web/comparison/README.md
diff --git a/web/lab/dist/index-dev.html → web/comparison/dist/index-dev.html b/web/lab/dist/index-dev.html → 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>
diff --git a/web/lab/dist/index-map.html → web/comparison/dist/index-map.html b/web/lab/dist/index-map.html → 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>
diff --git a/web/lab/dist/index.html → web/comparison/dist/index.html b/web/lab/dist/index.html → 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>
diff --git a/web/lab/dist/test-pack.js → web/comparison/dist/test-pack.js b/web/lab/dist/test-pack.js → web/comparison/dist/test-pack.js
diff --git a/web/lab/js/test.js → web/comparison/js/test.js b/web/lab/js/test.js → web/comparison/js/test.js
diff --git a/web/lab/lit/component-lit.js → web/comparison/lit/component-lit.js b/web/lab/lit/component-lit.js → 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 → web/comparison/oid/component-oid-1.js b/web/lab/oid/component-oid-1.js → web/comparison/oid/component-oid-1.js
diff --git a/web/lab/oid/component-oid-2.js → web/comparison/oid/component-oid-2.js b/web/lab/oid/component-oid-2.js → 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 → ...comparison/oid/component-oid-3-private.js b/web/lab/oid/component-oid-3-private.js → ...comparison/oid/component-oid-3-private.js
diff --git a/web/lab/package-lock.json → web/comparison/package-lock.json b/web/lab/package-lock.json → web/comparison/package-lock.json
diff --git a/web/lab/package.json → web/comparison/package.json b/web/lab/package.json → web/comparison/package.json
diff --git a/web/lab/raw/component-raw-1-element.js → ...comparison/raw/component-raw-1-element.js b/web/lab/raw/component-raw-1-element.js → ...comparison/raw/component-raw-1-element.js
diff --git a/web/lab/raw/component-raw-2-protected.js → ...mparison/raw/component-raw-2-protected.js b/web/lab/raw/component-raw-2-protected.js → ...mparison/raw/component-raw-2-protected.js
diff --git a/web/lab/raw/component-raw-3-private.js → ...comparison/raw/component-raw-3-private.js b/web/lab/raw/component-raw-3-private.js → ...comparison/raw/component-raw-3-private.js
diff --git a/web/lab/template/index.html → web/comparison/template/index.html b/web/lab/template/index.html → 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>
diff --git a/web/lab/webpack.config.js → web/comparison/webpack.config.js b/web/lab/webpack.config.js → 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: ''
     })
   ]