Merge branch 'release/1.0.0'

Author: titouanmathis

.eslintrc.js

@@ -12,7 +12,7 @@ module.exports = {
     'class-methods-use-this': 'off',
     'no-underscore-dangle': [
       'error',
-      { allow: ['__base__', '__isChild__', '__isBase__', '__isAsync__', '_excludeFromAutoBind'] },
+      { allow: ['__base__', '_excludeFromAutoBind'] },
     ],
   },
   settings: {
@@ -30,5 +30,11 @@ module.exports = {
         'require-jsdoc': 'off',
       },
     },
+    {
+      files: ['**/*.ts'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint'],
+      extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+    },
   ],
 };

.github/workflows/tests.yml

@@ -1,10 +1,12 @@
 name: Tests
+
 on:
   push:
     branches:
       - master
       - develop
   pull_request:
+
 jobs:
   Unit:
     runs-on: ubuntu-latest
@@ -15,6 +17,10 @@ jobs:
         node-version: 14
     - name: Install modules
       run: npm ci
+    - name: Run code quality tests
+      run: npm run lint:eslint -- --format=compact
+    - name: Run types tests
+      run: npm run lint:types
     - name: Run tests
       run: npm run test -- --coverage
     - name: Upload coverage to Codecov

.gitignore

@@ -26,3 +26,5 @@ dist/*.html
 demo/dist/
 docs/.vuepress/dist/
 coverage/
+/full.d.ts
+/index.d.ts

babel.config.js

@@ -9,17 +9,8 @@ module.exports = {
   ],
   plugins:
     process.env.NODE_TARGET === 'bundle'
-      ? [
-          '@babel/plugin-proposal-class-properties',
-          '@babel/plugin-proposal-export-default-from',
-          '@babel/plugin-proposal-export-namespace-from',
-        ]
-      : [
-          '@babel/plugin-transform-runtime',
-          '@babel/plugin-proposal-class-properties',
-          '@babel/plugin-proposal-export-default-from',
-          '@babel/plugin-proposal-export-namespace-from',
-        ],
+      ? ['@babel/plugin-proposal-class-properties']
+      : ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
   parserOpts: {
     plugins: ['dynamicImport', 'classProperties'],
   },

codecov.yml

@@ -0,0 +1,8 @@
+coverage:
+  status:
+    project:
+      default:
+        informational: true
+    patch:
+      default:
+        informational: true

demo/.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
   rules: {
     'class-methods-use-this': 'off',
     'require-jsdoc': 'off',
-    'no-underscore-dangle': ['error', { allow: ['__base__', '__isChild__', '__isBase__'] }],
+    'no-underscore-dangle': ['error', { allow: ['__base__'] }],
     'import/no-extraneous-dependencies': 'off',
   },
 };

demo/src/index.html

@@ -22,7 +22,8 @@
       <!-- BEGIN BreakpointObserverDemo -->
       <div
         data-component="BreakpointObserverDemo"
-        data-options='{ "name": "BreakpointObserverDemoTable", "activeBreakpoints": "m" }'
+        data-option-name="BreakpointObserverDemoTable"
+        data-option-active-breakpoints="m"
         class="relative flex items-center justify-center w-full h-32 mb-10 text-white text-center"
       >
         <div class="z-under absolute inset-0 opacity-75 bg-black rounded"></div>
@@ -37,7 +38,8 @@
       <!-- BEGIN BreakpointObserverDemo -->
       <div
         data-component="BreakpointObserverDemo"
-        data-options='{ "name": "BreakpointObserverDemoMobileDesktop", "inactiveBreakpoints": "m" }'
+        data-option-name="BreakpointObserverDemoMobileDesktop"
+        data-option-inactive-breakpoints=m"
         class="relative flex items-center justify-center w-full h-32 mb-10 text-white text-center"
       >
         <div class="z-under absolute inset-0 opacity-75 bg-black rounded"></div>
@@ -52,7 +54,8 @@
       <div
         data-ref="modal"
         data-component="Modal"
-        data-options='{ "activeBreakpoints": "m l", "styles": { "modal": { "active": "transition-all duration-500" } } }'
+        data-option-active-breakpoints="m l"
+        data-option-styles='{ "modal": { "active": "transition-all duration-500" } }'
         class="text-center"
       >
         <!--
@@ -125,11 +128,13 @@
       <br />
       <br />
       <!-- BEGIN Accordion component-->
-      <div data-component="Accordion" data-options='{ "autoclose": false }'>
+      <div data-component="Accordion" 
+      data-option-autoclose
+      data-option-item='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" } } }'>
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "isOpen": true, "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" } } }'
+          data-option-is-open
         >
           <button data-ref="btn" class="block w-full p-4 text-left cursor-pointer">
             Lorem ipsum
@@ -145,7 +150,6 @@
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" } } }'
         >
           <button data-ref="btn" class="block w-full p-4 text-left cursor-pointer">
             Lorem ipsum
@@ -161,7 +165,6 @@
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" } } }'
         >
           <button data-ref="btn" class="block w-full p-4 text-left cursor-pointer">
             Lorem ipsum
@@ -184,7 +187,7 @@
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } } }'
+          data-option-styles='{ "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } }'
         >
           <button data-ref="btn" class="flex justify-between w-full p-4 text-left cursor-pointer">
             Show image #1
@@ -193,7 +196,7 @@
           <div data-ref="container" class="relative overflow-hidden">
             <div data-ref="content" class="w-full p-4 pt-0">
               <img
-                data-options='{ "log": true }'
+                data-option-log
                 data-src="https://placekitten.com/200/100"
                 width="200"
                 height="100"
@@ -205,7 +208,7 @@
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } } }'
+          data-option-styles='{ "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } }'
         >
           <button data-ref="btn" class="flex justify-between w-full p-4 text-left cursor-pointer">
             Show image #2
@@ -220,7 +223,7 @@
         <div
           data-component="AccordionItem"
           class="border -mb-px"
-          data-options='{ "styles": { "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } } }'
+          data-option-styles='{ "container": { "active": "transition-all duration-500 ease-out-expo" }, "icon": { "open": "transform rotate-180", "active": "transition duration-500 ease-out-expo" } }'
         >
           <button data-ref="btn" class="flex justify-between w-full p-4 text-left cursor-pointer">
             Show image #3
@@ -241,7 +244,7 @@
       <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
       <div
         data-component="Tabs"
-        data-options='{ "styles": { "btn": { "open": { "borderBottomColor": "#fff" } } } }'
+        data-option-styles='{ "btn": { "open": { "borderBottomColor": "#fff" } } }'
       >
         <div class="flex px-4 border-b">
           <button data-ref="btn[]" class="-mb-px -ml-px p-4 border">Tab #1</button>
@@ -265,7 +268,7 @@ <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
           <div data-ref="content[]" aria-hidden="true">
             <img
               data-src="https://placekitten.com/299/299"
-              data-options='{ "debug": true }'
+              data-option-debug
               src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
               width="300"
               height="300"

demo/src/js/app.js

@@ -1,27 +1,34 @@
-import Base from '~/src';
-import { Modal, Tabs, Accordion } from '~/src/components';
-import { withBreakpointObserver } from '~/src/decorators';
+import Base from '../../../src';
+import { Modal, Tabs, Accordion } from '../../../src/components';
+import withBreakpointObserver from '../../../src/decorators/withBreakpointObserver';
 import BreakpointManagerDemo from './components/BreakPointManagerDemo';
 import BreakpointObserverDemo from './components/BreakpointObserverDemo';
 
+/**
+ * @typedef {import(../../../src/abstracts/Base/index).BaseConfig} BaseConfig
+ */
 class App extends Base {
-  get config() {
-    return {
-      name: 'App',
-      log: true,
-      components: {
-        Accordion,
-        BreakpointManagerDemo,
-        BreakpointObserverDemo,
-        Cursor: () => import(/* webpackChunkName: "Cursor" */ './components/Cursor'),
-        Skew: () => import(/* webpackChunkName: "Skew" */ './components/Skew'),
-        '[data-src]': () => import(/* webpackChunkName: "Lazyload" */ './components/Lazyload'),
-        Modal: withBreakpointObserver(Modal),
-        Tabs,
-      },
-    };
-  }
+  /** @type {Baseconfig} */
+  static config = {
+    name: 'App',
+    refs: ['modal'],
+    log: true,
+    foo: 'dede',
+    components: {
+      Accordion,
+      BreakpointManagerDemo,
+      BreakpointObserverDemo,
+      Cursor: () => import(/* webpackChunkName: "Cursor" */ './components/Cursor'),
+      Skew: () => import(/* webpackChunkName: "Skew" */ './components/Skew'),
+      '[data-src]': () => import(/* webpackChunkName: "Lazyload" */ './components/Lazyload'),
+      Modal: withBreakpointObserver(Modal),
+      Tabs,
+    },
+  };
 
+  /**
+   * @inheritdoc
+   */
   mounted() {
     this.$log('Mounted 🎉');
   }

demo/src/js/components/BreakPointManagerDemo/BreakpointManagerDemoBase.js

@@ -1,11 +1,10 @@
-import Base from '~/src';
+import Base from '../../../../../src';
 
 export default class BreakpointManagerDemoBase extends Base {
-  get config() {
-    return {
-      log: false,
-    };
-  }
+  static config = {
+    log: false,
+    refs: ['content'],
+  };
 
   mounted() {
     this.$log('mounted');

demo/src/js/components/BreakPointManagerDemo/BreakpointManagerDemoDesktop.js

@@ -1,10 +1,8 @@
 import BreakpointManagerDemoBase from './BreakpointManagerDemoBase';
 
 export default class BreakpointManagerDemoDesktop extends BreakpointManagerDemoBase {
-  get config() {
-    return {
-      ...(super.config || {}),
-      name: 'BreakpointManagerDemoDesktop',
-    };
-  }
+  static config = {
+    ...(BreakpointManagerDemoBase.config || {}),
+    name: 'BreakpointManagerDemoDesktop',
+  };
 }