fix: updates to optimize tree shaking (#467)

* fix: remove nested exports

* fix: update paths accross the project

* fix: remove .js from all imports

* fix: adjust rollup settings for tree shaking

* fix: misc tree shaking optimizations

* fix: run linting

* fix: update paths

* fix: update paths to textures in tests

* fix: lower statement coverage to 84

* fix: add bundle analyzer

* fix: remove rollup warning

* fix: remove unused json plugin from config. Fix unused import error

* fix: ignore class transforms

* fix: formatting issues

* fix: lower the threadhold for lines temporarily

* fix: add ts definition for context

* fix: add peer dependency for @lightningjs/core that includes a range

* fix: add peer dependency for @lightningjs/core that includes a range

* fix: revert change in withThemeStyles

* fix: removed unused files

* fix: update definition for context to fix linting errors. Revert change to withThemeStyles

.gitignore

@@ -26,4 +26,6 @@ CHANGELOG.md
 /packages/apps/lightning-ui-docs/scripts/themePropertyTables
 
 # Copied into folder from root directory during release
-/packages/@lightningjs/ui-components/README.md
+/packages/@lightningjs/ui-components/README.md
+
+/packages/@lightningjs/ui-components/bundle-analysis.html

jest.config.js

@@ -26,9 +26,9 @@ module.exports = {
   coverageReporters: ['html', 'text-summary'],
   coverageThreshold: {
     global: {
-      statements: 85,
-      functions: 85,
-      lines: 85
+      statements: 84,
+      functions: 84,
+      lines: 84
     }
   },
   maxWorkers: '4',

package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "start": "yarn workspace lightning-ui-docs start",
     "build": "yarn workspaces foreach --exclude lightning-ui-docs run build",
+    "build:analyze": "cross-env ANALYZE=true yarn build",
     "prepare": "husky install",
     "release": "git fetch origin && git checkout develop && git pull origin develop && git pull origin release && git push origin develop && git checkout release && git pull origin release && git pull origin develop && git push origin release",
     "lint": "yarn eslint . --ext .js,.ts",
@@ -24,6 +25,7 @@
     "createComponent": "node bin/create.js"
   },
   "devDependencies": {
+    "@babel/plugin-transform-optional-chaining": "^7.23.4",
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@rollup/plugin-babel": "^6.0.2",
@@ -37,6 +39,7 @@
     "@semantic-release/release-notes-generator": "^10.0.3",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-standard-with-typescript": "^26.0.0",
@@ -57,6 +60,7 @@
     "rollup-plugin-dts": "5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release": "^19.0.5",
     "semantic-release-monorepo": "^7.0.5",
     "semantic-release-slack-bot": "^3.5.3",

packages/@lightningjs/ui-components/index.d.ts

@@ -19,7 +19,7 @@
 export * from './src/components';
 export * from './src/mixins';
 export * from './src/types/lui';
-// export * from './src/globals';
+export * from './src/globals';
 
 // exports without type definitions
 export { default as utils } from './src/utils';

packages/@lightningjs/ui-components/index.js

@@ -16,10 +16,113 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+// Utils
 export { default as utils } from './src/utils';
-export * from './src/components';
-export * from './src/globals';
-export * from './src/mixins';
-export * from './src/shaders';
-export * from './src/textures';
-export * from './src/docs/story-components';
+
+// Components
+export { default as Artwork } from './src/components/Artwork/Artwork';
+export { default as Badge } from './src/components/Badge/Badge';
+export { default as Base } from './src/components/Base/Base';
+export { default as Button } from './src/components/Button/Button';
+export { default as ButtonSmall } from './src/components/Button/ButtonSmall';
+export {
+  default as Card,
+  CardRadio,
+  CardSection,
+  CardTitle
+} from './src/components/Card';
+export {
+  default as CardContent,
+  CardContentHorizontal,
+  CardContentHorizontalLarge,
+  CardContentVertical,
+  CardContentVerticalSmall
+} from './src/components/CardContent';
+export { default as Checkbox } from './src/components/Checkbox/Checkbox';
+export { default as CheckboxSmall } from './src/components/Checkbox/CheckboxSmall';
+export { default as Column } from './src/components/Column/Column';
+export { default as Control } from './src/components/Control/Control';
+export { default as ControlSmall } from './src/components/Control/ControlSmall';
+export { default as ControlRow } from './src/components/ControlRow/ControlRow';
+export { default as FocusManager } from './src/components/FocusManager/FocusManager';
+export { default as Gradient } from './src/components/Gradient/Gradient';
+export { default as GridOverlay } from './src/components/GridOverlay/GridOverlay';
+export { default as Icon } from './src/components/Icon/Icon';
+export { default as InlineContent } from './src/components/InlineContent/InlineContent';
+export { default as Input } from './src/components/Input/Input';
+export { default as Key } from './src/components/Key/Key';
+export {
+  default as Keyboard,
+  KeyboardEmail,
+  KeyboardFullscreen,
+  KeyboardNumbers,
+  KeyboardQwerty,
+  KeyboardInput,
+  KeyboardSearch
+} from './src/components/Keyboard';
+export { default as Knob } from './src/components/Knob/Knob';
+export { default as Label } from './src/components/Label/Label';
+export {
+  default as ListItem,
+  ListItemPicker,
+  ListItemSlider
+} from './src/components/ListItem';
+export { default as Marquee } from './src/components/Marquee/Marquee';
+export { default as MetadataBase } from './src/components/MetadataBase/MetadataBase';
+export { default as MetadataCard } from './src/components/MetadataCard';
+export { default as MetadataCardContent } from './src/components/MetadataCardContent';
+export { default as MetadataTile } from './src/components/MetadataTile/MetadataTile';
+export { default as NavigationManager } from './src/components/NavigationManager';
+export { default as ProgressBar } from './src/components/ProgressBar/ProgressBar';
+export { default as Provider } from './src/components/Provider';
+export { default as Radio } from './src/components/Radio/Radio';
+export { default as RadioSmall } from './src/components/Radio/RadioSmall';
+export { default as Row } from './src/components/Row/Row';
+export { default as ScrollWrapper } from './src/components/ScrollWrapper/ScrollWrapper';
+export { default as Shadow } from './src/components/Shadow/Shadow';
+export { default as Slider } from './src/components/Slider/Slider';
+export { default as SliderLarge } from './src/components/Slider/SliderLarge';
+export { default as Surface } from './src/components/Surface/Surface';
+export { default as TabBar, Tab } from './src/components/TabBar';
+export { default as TextBox } from './src/components/TextBox/TextBox';
+export { default as Tile } from './src/components/Tile/Tile';
+export { default as TitleRow } from './src/components/TitleRow/TitleRow';
+export { default as Toggle } from './src/components/Toggle/Toggle';
+export { default as ToggleSmall } from './src/components/Toggle/ToggleSmall';
+export { default as Tooltip } from './src/components/Tooltip/Tooltip';
+
+// Globals
+export { default as context } from './src/globals/context';
+export { updateManager } from './src/globals/global-update-manager/GlobalUpdateManager';
+export { default as pool } from './src/globals/pool';
+
+// Mixins
+export {
+  default as withAnnouncer,
+  generateAbbrevConfig,
+  defaultAbbrevConfig
+} from './src/mixins/withAnnouncer';
+export { default as Speech } from './src/mixins/withAnnouncer/Speech';
+export { default as withClassCache } from './src/mixins/withClassCache';
+export { default as withHandleKey } from './src/mixins/withHandleKey';
+export { default as withLayout } from './src/mixins/withLayout';
+export { default as withMarqueeSync } from './src/mixins/withMarqueeSync';
+export { default as withSelections } from './src/mixins/withSelections';
+export { default as withThemeStyles } from './src/mixins/withThemeStyles';
+export { default as withTags } from './src/mixins/withTags';
+export { default as withUpdates } from './src/mixins/withUpdates';
+export { default as withEditItems } from './src/mixins/withEditItems';
+export { default as withExtensions } from './src/mixins/withExtensions';
+
+// Shaders
+export { default as FadeShader } from './src/shaders/FadeShader';
+
+// Textures
+export { default as LinearGradient } from './src/textures/LinearGradient';
+export { default as Circle } from './src/textures/Circle';
+export { default as Arrow } from './src/textures/Arrow';
+export { default as Bubble } from './src/textures/Bubble';
+export { default as Line } from './src/textures/Line';
+
+// Storybook
+export { default as SignalButton } from './src/docs/story-components/SignalButton';

packages/@lightningjs/ui-components/package.json

@@ -27,12 +27,14 @@
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --no-coverage --watch --colors"
   },
   "peerDependencies": {
-    "@lightningjs/core": "2.11.0"
+    "@lightningjs/core": ">=2.0.0 <=2.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
     "@lightningjs/ui-components-test-utils": "workspace:^",
     "@mdx-js/react": "^1.6.22",
+    "@rollup/plugin-babel": "^6.0.4",
     "babel-jest": "^29.0.3",
     "babel-loader": "^8.2.5",
     "enhanced-resolve": "^5.10.0",

packages/@lightningjs/ui-components/src/components/Artwork/Artwork.js

@@ -20,8 +20,8 @@ import lng from '@lightningjs/core';
 import { getValidColor, reduceFraction } from '../../utils';
 import Base from '../Base';
 import Gradient from '../Gradient';
-import * as styles from './Artwork.styles.js';
-import { context } from '../../globals';
+import * as styles from './Artwork.styles';
+import context from '../../globals/context/index';
 import CustomImageTexture from '../../textures/CustomImageTexture';
 
 export default class Artwork extends Base {

packages/@lightningjs/ui-components/src/components/Artwork/Artwork.mdx

@@ -18,7 +18,7 @@ SPDX-License-Identifier: Apache-2.0
 \*/}
 
 import { Meta, Title } from '@storybook/blocks';
-import * as ArtworkStories from './Artwork.stories.js';
+import * as ArtworkStories from './Artwork.stories';
 
 <Meta of={ArtworkStories} />
 

packages/@lightningjs/ui-components/src/components/Artwork/index.js

@@ -16,4 +16,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { default as default } from './Artwork.js';
+export { default as default } from './Artwork';

packages/@lightningjs/ui-components/src/components/Badge/Badge.js

@@ -19,7 +19,7 @@
 import Base from '../Base';
 import Icon from '../Icon';
 import { getHexColor } from '../../utils';
-import * as styles from './Badge.styles.js';
+import * as styles from './Badge.styles';
 import lng from '@lightningjs/core';
 
 export default class Badge extends Base {

packages/@lightningjs/ui-components/src/components/Badge/Badge.mdx

@@ -19,7 +19,7 @@ SPDX-License-Identifier: Apache-2.0
 
 import { Meta, Title } from '@storybook/blocks';
 import Badge from '.';
-import * as BadgeStories from './Badge.stories.js';
+import * as BadgeStories from './Badge.stories';
 
 <Meta of={BadgeStories} />
 

packages/@lightningjs/ui-components/src/components/Badge/index.js

@@ -16,4 +16,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { default as default } from './Badge.js';
+export { default as default } from './Badge';

packages/@lightningjs/ui-components/src/components/Base/Base.js

@@ -17,15 +17,13 @@
  */
 
 import lng from '@lightningjs/core';
-import { context } from '../../globals';
-import {
-  withUpdates,
-  withTags,
-  withHandleKey,
-  withLayout,
-  withThemeStyles,
-  withExtensions
-} from '../../mixins';
+import context from '../../globals/context/index';
+import withUpdates from '../../mixins/withUpdates';
+import withTags from '../../mixins/withTags';
+import withHandleKey from '../../mixins/withHandleKey';
+import withLayout from '../../mixins/withLayout';
+import withThemeStyles from '../../mixins/withThemeStyles';
+import withExtensions from '../../mixins/withExtensions';
 import { isComponentOnScreen } from '../../utils';
 
 class Base extends lng.Component {

packages/@lightningjs/ui-components/src/components/Base/index.js

@@ -16,4 +16,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { default as default } from './Base.js';
+export { default as default } from './Base';

packages/@lightningjs/ui-components/src/components/Button/Button.js

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as styles from './Button.styles.js';
+import * as styles from './Button.styles';
 import Row from '../Row';
 import Surface from '../Surface';
 import TextBox from '../TextBox'; // There seams to be some issue with the circular dependency here

packages/@lightningjs/ui-components/src/components/Button/Button.mdx

@@ -18,7 +18,7 @@ SPDX-License-Identifier: Apache-2.0
 \*/}
 
 import { ArgTypes, Meta, Title, Description } from '@storybook/blocks';
-import * as ButtonStories from './Button.stories.js';
+import * as ButtonStories from './Button.stories';
 
 <Meta title="Components / Button" />
 

packages/@lightningjs/ui-components/src/components/Button/ButtonSmall.js

@@ -17,7 +17,7 @@
  */
 
 import Button from './Button';
-import * as styles from './ButtonSmall.styles.js';
+import * as styles from './ButtonSmall.styles';
 
 export default class ButtonSmall extends Button {
   static get __componentName() {

packages/@lightningjs/ui-components/src/components/Button/index.js

@@ -16,5 +16,5 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { default as default } from './Button.js';
-export { default as ButtonSmall } from './ButtonSmall.js';
+export { default as default } from './Button';
+export { default as ButtonSmall } from './ButtonSmall';

packages/@lightningjs/ui-components/src/components/Card/Card.js

@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import * as styles from './Card.styles.js';
+import * as styles from './Card.styles';
 import TextBox from '../TextBox';
 import Surface from '../Surface';
 

packages/@lightningjs/ui-components/src/components/Card/Card.stories.js

@@ -18,7 +18,7 @@
 
 import lng from '@lightningjs/core';
 import { createModeControl } from '../../docs/utils';
-import { default as CardComponent } from './Card.js';
+import { default as CardComponent } from './Card';
 
 export default {
   title: 'Components/Card/Card'

packages/@lightningjs/ui-components/src/components/Card/CardRadio.js

@@ -18,7 +18,7 @@
 
 import CardTitle from './CardTitle';
 import TextBox from '../TextBox';
-import * as styles from './CardRadio.styles.js';
+import * as styles from './CardRadio.styles';
 import Radio from '../Radio';
 
 export default class CardRadio extends CardTitle {

packages/@lightningjs/ui-components/src/components/Card/CardRadio.stories.js

@@ -17,8 +17,8 @@
  */
 
 import lng from '@lightningjs/core';
-import { default as CardRadioComponent } from './CardRadio.js';
-import { Radio as RadioStory } from '../Radio/Radio.stories.js';
+import { default as CardRadioComponent } from './CardRadio';
+import { Radio as RadioStory } from '../Radio/Radio.stories';
 import { createModeControl, generateSubStory } from '../../docs/utils';
 
 export default {

packages/@lightningjs/ui-components/src/components/Card/CardSection.stories.js

@@ -17,7 +17,7 @@
  */
 
 import lng from '@lightningjs/core';
-import { default as CardSectionComponent } from './CardSection.js';
+import { default as CardSectionComponent } from './CardSection';
 import sectionIcon from '../../assets/images/ic_check_circle_outline_inverse_24.png';
 import { createModeControl } from '../../docs/utils';
 

packages/@lightningjs/ui-components/src/components/Card/CardTitle.stories.js

@@ -17,7 +17,7 @@
  */
 
 import lng from '@lightningjs/core';
-import { default as CardTitleComponent } from './CardTitle.js';
+import { default as CardTitleComponent } from './CardTitle';
 import { createModeControl } from '../../docs/utils';
 
 export default {