Merge pull request #101 from IgniteUI/ddimitrov/optimize-build

build(*): optimize build process
IgniteUI · Nov 3, 2021 · 6217107 · 6217107
2 parents 64e4f05 + 010a0dc
commit 6217107
Show file tree

Hide file tree

Showing 56 changed files with 141 additions and 138 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,45 +11,44 @@
 <body>
   <div id="demo"></div>
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
-  <script defer src="https://i.icomoon.io/public/temp/1125a5bb7e/UntitledProject/svgxuse.js"></script>
+  <link rel="stylesheet" href="../dist/themes/material.css">
+  <style>
+    /* igc-calendar::part(header) {
+      background: #345779;
+    }
+
+    igc-calendar::part(date-inner selected),
+    igc-calendar::part(month-inner selected),
+    igc-calendar::part(year-inner selected) {
+      background: #345779;
+      border-color: #345779;
+    }
+
+    igc-calendar::part(date-inner current),
+    igc-calendar::part(navigation-button):hover,
+    igc-calendar::part(navigation-button):focus,
+    igc-calendar::part(months-navigation):hover,
+    igc-calendar::part(months-navigation):focus,
+    igc-calendar::part(years-navigation):hover,
+    igc-calendar::part(years-navigation):focus {
+      color: #2dabe8;
+    }
+
+    igc-calendar::part(date-inner current selected),
+    igc-calendar::part(month-inner current selected),
+    igc-calendar::part(year-inner current selected) {
+      box-shadow: inset 0 0 0 0.0625rem white, 0 0 0 0.0625rem #345779;
+      color: white;
+    } */
+
+  </style>
   <script type="module">
     import { html, render } from 'lit-html';
-    import '../dist/igniteui-webcomponents.js';
+    import '../dist/index.js';
 
     render(
       html`
-        <igniteui-webcomponents>
-          <igc-button>Click</igc-button>
-          <igc-link-button>Click</igc-link-button>
-          <div style="max-width: 320px">
-          <igc-card outlined="true">
-            <igc-card-media>
-              <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=320&q=180">
-            </igc-card-media>
-            <igc-card-header>
-              <span slot="thumbnail" class="material-icons">person</span>
-              <h3 slot="title">Title</h3>
-              <h5 slot="subtitle">Subtitle</h5>
-            </igc-card-header>
-            <igc-card-content>
-              <p>New YYork City comprises 5 boroughs sitting where the
-                  Hudson River meets the Atlantic Ocean. At its core is Manhattan,
-                  a densely populated borough that’s among the world’s major commercial,
-                  financial and cultural centers.</p>
-            </igc-card-content>
-            <igc-card-actions>
-              <div slot="start">
-                <button class="mdc-button">Like</button>
-                <button class="mdc-button">Lear More</button>
-              </div>
-              <div slot="end">
-                <span slot="thumbnail" class="material-icons">home</span>
-              </div>
-            </igc-card-actions>
-          </igc-card>
-          </div>
-        </igniteui-webcomponents>
+        <igc-calendar></igc-calendar>
       `,
       document.querySelector('#demo')
     );

diff --git a/index.ts b/index.ts
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "start": "npm run storybook",
-    "serve": "npm run build && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wds\"",
+    "serve": "npm run build:publish && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wds\"",
     "build": "npm run clean && npm run build:styles && npm run build:typescript && npm run build:docs:json && npm run build:meta",
     "build:publish": "node scripts/build.js",
     "build:typescript": "tsc",
@@ -47,7 +47,7 @@
     "typedoc:dev": "gulp typedocServe"
   },
   "dependencies": {
-    "lit": "^2.0.0"
+    "lit": "^2.0.2"
   },
   "devDependencies": {
     "@igniteui/material-icons-extended": "^2.9.0",

diff --git a/scripts/_package.json b/scripts/_package.json
@@ -9,6 +9,7 @@
   "main": "index.js",
   "module": "index.js",
   "types": "index.d.ts",
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/IgniteUI/igniteui-webcomponents"
@@ -37,7 +38,7 @@
     "slider",
     "switch"
   ],
-  "peerDependencies": {
+  "dependencies": {
     "lit": "^2.0.0"
   }
 }
diff --git a/scripts/build-styles.js b/scripts/build-styles.js
@@ -38,7 +38,7 @@ async function sassRender(sourceFile, templateFile, outputFile) {
 
 (async () => {
   const template = path.resolve(process.argv[1], '../styles.tmpl');
-  const paths = await globby(['src/components/**/*.scss', 'src/styles/themes/**/*.scss']);
+  const paths = await globby(['src/components/**/*.material.scss']);
 
   for (const sourceFile of paths) {
     const output = sourceFile.replace(/\.scss$/, '.css.ts');

diff --git a/scripts/build.js b/scripts/build.js
@@ -1,5 +1,4 @@
 const fs = require('fs');
-const rimraf = require('rimraf');
 const path = require('path');
 const sass = require('sass');
 const globby = require('globby');
@@ -8,6 +7,8 @@ const postcss = require('postcss');
 const { promisify } = require('util');
 
 const exec = promisify(require('child_process').exec);
+const getDirName = path.dirname;
+const makeDir = fs.mkdirSync;
 const copyFile = promisify(fs.copyFile);
 const writeFile = promisify(fs.writeFile);
 const renderSass = promisify(sass.render);
@@ -17,8 +18,6 @@ const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
 const THEMES_PATH = `src/styles/themes`;
 
 async function buildThemes() {
-  rimraf(DEST_DIR(`${THEMES_PATH}/*.js`), (err) => { if (err) console.error(err); });
-
   const paths = await globby(`${THEMES_PATH}/**/*.scss`);
 
   for (const sassFile of paths) {
@@ -32,7 +31,9 @@ async function buildThemes() {
       outCss = outCss.substr(1);
     }
 
-    await writeFile(DEST_DIR(sassFile.replace(/\.scss$/, '.css')), outCss, 'utf-8');
+    const outputFile = DEST_DIR(sassFile.replace(/\.scss$/, '.css').replace('src/styles/', ''));
+    makeDir(getDirName(outputFile), { recursive: true });
+    await writeFile(outputFile, outCss, 'utf-8');
   }
 }
 

diff --git a/src/components/avatar/avatar.spec.ts b/src/components/avatar/avatar.spec.ts
@@ -1,5 +1,5 @@
 import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import type IgcAvatarComponent from './avatar';
 
 describe('Avatar', () => {

diff --git a/src/components/badge/badge.spec.ts b/src/components/badge/badge.spec.ts
@@ -1,5 +1,5 @@
 import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import type IgcBadgeComponent from './badge';
 
 describe('Badge', () => {

diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts
@@ -6,7 +6,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import sinon from 'sinon';
-import '../../../index.js';
+import '../../index.js';
 import type IgcButtonComponent from './button';
 
 export const DEFAULT_CLASSES = 'native';

diff --git a/src/components/button/icon-button.spec.ts b/src/components/button/icon-button.spec.ts
@@ -5,7 +5,7 @@ import {
   html,
   unsafeStatic,
 } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import type IgcIconButtonComponent from './icon-button';
 
 describe('IconButton component', () => {

diff --git a/src/components/button/link-button.spec.ts b/src/components/button/link-button.spec.ts
@@ -5,7 +5,7 @@ import {
   html,
   unsafeStatic,
 } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import { classValue } from './button.spec';
 import type IgcLinkButtonComponent from './link-button';
 

diff --git a/src/components/calendar/calendar-keyboard-navigation.spec.ts b/src/components/calendar/calendar-keyboard-navigation.spec.ts
@@ -1,6 +1,6 @@
 import { expect, elementUpdated } from '@open-wc/testing';
 import type IgcCalendarComponent from './calendar';
-import '../../../index.js';
+import '../../index.js';
 import { createCalendarElement } from './calendar-rendering.spec';
 
 describe('Calendar Rendering', () => {

diff --git a/src/components/calendar/calendar-rendering.spec.ts b/src/components/calendar/calendar-rendering.spec.ts
@@ -1,5 +1,5 @@
 import { expect, fixture, html, elementUpdated } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import type IgcCalendarComponent from './calendar';
 import type IgcDaysViewComponent from './days-view/days-view';
 import type IgcMonthsViewComponent from './months-view/months-view';

diff --git a/src/components/calendar/calendar.interaction.spec.ts b/src/components/calendar/calendar.interaction.spec.ts
@@ -1,6 +1,6 @@
 import { elementUpdated, expect } from '@open-wc/testing';
 import sinon from 'sinon';
-import '../../../index.js';
+import '../../index.js';
 import { createCalendarElement } from './calendar-rendering.spec.js';
 import type IgcCalendarComponent from './calendar.js';
 import type IgcDaysViewComponent from './days-view/days-view.js';

diff --git a/...alendar/days-view/days-view-material.scss → ...alendar/days-view/days-view.material.scss b/...alendar/days-view/days-view-material.scss → ...alendar/days-view/days-view.material.scss
diff --git a/src/components/calendar/days-view/days-view.ts b/src/components/calendar/days-view/days-view.ts
@@ -11,7 +11,7 @@ import {
   IgcCalendarBaseEventMap,
 } from '../common/calendar-base';
 import { areEqualDates, getDateOnly, isEqual } from '../common/utils';
-import { styles } from './days-view-material.css';
+import { styles } from './days-view.material.css';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter';
 import { Constructor } from '../../common/mixins/constructor';
 import { property, query, customElement } from 'lit/decorators.js';

diff --git a/...nts/calendar/months-view/months-view.scss → ...dar/months-view/months-view.material.scss b/...nts/calendar/months-view/months-view.scss → ...dar/months-view/months-view.material.scss
diff --git a/src/components/calendar/months-view/months-view.ts b/src/components/calendar/months-view/months-view.ts
@@ -5,7 +5,7 @@ import { Constructor } from '../../common/mixins/constructor';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter';
 import { Calendar, TimeDeltaInterval } from '../common/calendar.model';
 import { IgcCalendarBaseEventMap } from '../common/calendar-base';
-import { styles } from './months-view.css';
+import { styles } from './months-view.material.css';
 import { partNameMap } from '../../common/util';
 import { setDateSafe } from '../common/utils';
 import { MONTHS_PER_ROW } from '../calendar';

diff --git a/...nents/calendar/years-view/years-view.scss → ...endar/years-view/years-view.material.scss b/...nents/calendar/years-view/years-view.scss → ...endar/years-view/years-view.material.scss
diff --git a/src/components/calendar/years-view/years-view.ts b/src/components/calendar/years-view/years-view.ts
@@ -7,7 +7,7 @@ import { partNameMap } from '../../common/util';
 import { YEARS_PER_ROW } from '../calendar';
 import { IgcCalendarBaseEventMap } from '../common/calendar-base';
 import { calculateYearsRangeStart, setDateSafe } from '../common/utils';
-import { styles } from './years-view.css';
+import { styles } from './years-view.material.css';
 
 /**
  * Instantiate a years view as a separate component in the calendar.

diff --git a/src/components/card/card.spec.ts b/src/components/card/card.spec.ts
@@ -1,5 +1,5 @@
 import { html, fixture, expect, elementUpdated } from '@open-wc/testing';
-import '../../../index.js';
+import '../../index.js';
 import type IgcCardComponent from './card';
 
 describe('Card Component', () => {

diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts
@@ -6,7 +6,7 @@ import {
   unsafeStatic,
 } from '@open-wc/testing';
 import sinon from 'sinon';
-import '../../../index.js';
+import '../../index.js';
 import type IgcCheckboxComponent from './checkbox';
 
 describe('Checkbox', () => {