refactor(*): move peers into peerDependencies (#178)

* refactor(*): move peers into peerDependencies

* chore(*): print npm version

* chore(*): update package lock

* fix(*): trial custom npm build

* fix(*): build utils before core

* chore(core): move utils to peerDependencies

* chore(*): update release build commands

* Add types versions  (#183)

* refactor(core): rename elf.ts to index.ts to ensure default importing
refactor(utils): rename utils.ts to index.ts to ensure default importing
refactor(core): simplify package exports to remove `lib` path support
refactor(utils): simplify package exports to remove `lib` path support
refactor(elements): simplify package exports to remove `lib` path support
refactor(phrasebook): simplify package exports to remove `lib` path support

* fix(*): be flexible with types versions

Co-authored-by: Tremayne Christ <[email protected]>

Co-authored-by: Aleksejs <[email protected]>

.github/workflows/prerelease.yml

@@ -30,7 +30,7 @@ jobs:
         run: npm ci --ignore-scripts --audit=false --fund=false
 
       - name: Production build
-        run: lerna run build:prod --include-dependencies --since
+        run: npm run build:prod --workspaces
 
       # Increment a prerelease version for change packages according to conventional commits
       # Add --preid to change prerelease identifier, default to alpha

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
         run: npm ci --ignore-scripts --audit=false --fund=false
 
       - name: Production build
-        run: lerna run build:prod --include-dependencies --since
+        run: npm run build:prod --workspaces
 
       - name: Bump version and create GitHub release
         run: lerna version --create-release github --conventional-commits --yes

.github/workflows/test.yml

@@ -17,13 +17,16 @@ jobs:
         uses: ./.github/actions/setup
         id: setup
 
+      - name: Print versions
+        run: npm version
+
       - name: Install Dependencies
         if: steps.setup.outputs.cache-dependencies-hit != 'true'
         run: npm ci --ignore-scripts --audit=false --fund=false
 
       - name: Build
         if: steps.setup.outputs.cache-build-hit != 'true'
-        run: lerna run build --include-dependencies --since origin/develop...HEAD
+        run: npm run build --workspaces
 
   lint:
     needs: build

documents/package.json

@@ -11,7 +11,8 @@
     "start": "concurrently \"pandora build dist --watch\" \"serve dist -s\"",
     "copy:resources": "cp -r resources dist/resources && cp src/theme-loader.js dist/theme-loader.js",
     "build:api": "lerna run --scope @refinitiv-ui/elements api-analyzer --stream && node ./scripts/element.injector.js",
-    "build": "rm -rf build && npm run build:api && pandora build dist --clean && npm run copy:resources"
+    "build": "rm -rf build && npm run build:api && pandora build dist --clean && npm run copy:resources",
+    "build:prod": "npm run build"
   },
   "repository": {
     "type": "git",

package.json

@@ -2,7 +2,20 @@
   "name": "root",
   "private": true,
   "workspaces": [
-    "packages/*",
+    "packages/configurations",
+    "packages/utils",
+    "packages/core",
+    "packages/phrasebook",
+    "packages/i18n",
+    "packages/translate",
+    "packages/demo-block",
+    "packages/test-helpers",
+    "packages/theme-compiler",
+    "packages/elemental-theme",
+    "packages/solar-theme",
+    "packages/halo-theme",
+    "packages/elements",
+    "packages/polyfills",
     "documents"
   ],
   "engines": {
@@ -11,9 +24,9 @@
   },
   "scripts": {
     "lerna": "lerna",
-    "build": "lerna run build",
+    "build": "npm run build --workspaces",
     "build:docs": "lerna run --scope @refinitiv-ui/docs build --stream",
-    "build:prod": "lerna run build:prod",
+    "build:prod": "npm run build:prod --workspaces",
     "start": "node cli start",
     "start:docs": "lerna run --scope @refinitiv-ui/docs start --stream",
     "test": "node cli test",

packages/configurations/package.json

@@ -7,6 +7,10 @@
     "url": "[email protected]:Refinitiv/refinitiv-ui.git",
     "directory": "packages/configurations"
   },
+  "scripts": {
+    "build": "echo \"No build command found\"",
+    "build:prod": "echo \"No build:prod command found\""
+  },
   "keywords": [
     "Element Framework",
     "v5",

packages/core/package.json

@@ -2,36 +2,42 @@
   "name": "@refinitiv-ui/core",
   "version": "5.4.0",
   "description": "Element Framework Core",
-  "main": "./lib/elf.js",
-  "module": "./lib/elf.js",
-  "types": "./lib/elf.d.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": ["lib/*"],
+      "lib/*": ["lib/*"]
+    }
+  },
   "exports": {
     ".": {
-      "default": "./lib/elf.js"
+      "default": "./lib/index.js"
     },
-    "./lib/directives/async-append.js": "./lib/directives/async-append.js",
-    "./lib/directives/async-replace.js": "./lib/directives/async-replace.js",
-    "./lib/directives/cache.js": "./lib/directives/cache.js",
-    "./lib/directives/class-map.js": "./lib/directives/class-map.js",
-    "./lib/directives/guard.js": "./lib/directives/guard.js",
-    "./lib/directives/if-defined.js": "./lib/directives/if-defined.js",
-    "./lib/directives/live.js": "./lib/directives/live.js",
-    "./lib/directives/ref.js": "./lib/directives/ref.js",
-    "./lib/directives/repeat.js": "./lib/directives/repeat.js",
-    "./lib/directives/style-map.js": "./lib/directives/style-map.js",
-    "./lib/directives/template-content.js": "./lib/directives/template-content.js",
-    "./lib/directives/template-map.js": "./lib/directives/template-map.js",
-    "./lib/directives/unsafe-html.js": "./lib/directives/unsafe-html.js",
-    "./lib/directives/unsafe-svg.js": "./lib/directives/unsafe-svg.js",
-    "./lib/directives/until.js": "./lib/directives/until.js",
-    "./lib/decorators/custom-element.js": "./lib/decorators/custom-element.js",
-    "./lib/decorators/event-options.js": "./lib/decorators/event-options.js",
-    "./lib/decorators/property.js": "./lib/decorators/property.js",
-    "./lib/decorators/query.js": "./lib/decorators/query.js",
-    "./lib/decorators/query-all.js": "./lib/decorators/query-all.js",
-    "./lib/decorators/query-assigned-nodes.js": "./lib/decorators/query-assigned-nodes.js",
-    "./lib/decorators/query-async.js": "./lib/decorators/query-async.js",
-    "./lib/decorators/state.js": "./lib/decorators/state.js"
+    "./directives/async-append.js": "./lib/directives/async-append.js",
+    "./directives/async-replace.js": "./lib/directives/async-replace.js",
+    "./directives/cache.js": "./lib/directives/cache.js",
+    "./directives/class-map.js": "./lib/directives/class-map.js",
+    "./directives/guard.js": "./lib/directives/guard.js",
+    "./directives/if-defined.js": "./lib/directives/if-defined.js",
+    "./directives/live.js": "./lib/directives/live.js",
+    "./directives/ref.js": "./lib/directives/ref.js",
+    "./directives/repeat.js": "./lib/directives/repeat.js",
+    "./directives/style-map.js": "./lib/directives/style-map.js",
+    "./directives/template-content.js": "./lib/directives/template-content.js",
+    "./directives/template-map.js": "./lib/directives/template-map.js",
+    "./directives/unsafe-html.js": "./lib/directives/unsafe-html.js",
+    "./directives/unsafe-svg.js": "./lib/directives/unsafe-svg.js",
+    "./directives/until.js": "./lib/directives/until.js",
+    "./decorators/custom-element.js": "./lib/decorators/custom-element.js",
+    "./decorators/event-options.js": "./lib/decorators/event-options.js",
+    "./decorators/property.js": "./lib/decorators/property.js",
+    "./decorators/query.js": "./lib/decorators/query.js",
+    "./decorators/query-all.js": "./lib/decorators/query-all.js",
+    "./decorators/query-assigned-nodes.js": "./lib/decorators/query-assigned-nodes.js",
+    "./decorators/query-async.js": "./lib/decorators/query-async.js",
+    "./decorators/state.js": "./lib/decorators/state.js"
   },
   "repository": {
     "type": "git",
@@ -53,10 +59,12 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@refinitiv-ui/utils": "^5.1.1",
     "lit": "~2.1.1",
     "tslib": "^2.3.1"
   },
+  "peerDependencies": {
+    "@refinitiv-ui/utils": "^5.1.1"
+  },
   "devDependencies": {
     "@refinitiv-ui/test-helpers": "^5.1.2"
   },

packages/core/src/elements/FormFieldElement.ts

@@ -1,7 +1,7 @@
 import { html, TemplateResult, PropertyValues } from 'lit';
-import { label as inputLabel } from '@refinitiv-ui/utils/lib/accessibility/label.js';
-import { description as inputDescription } from '@refinitiv-ui/utils/lib/accessibility/description.js';
-import { required as inputRequired } from '@refinitiv-ui/utils/lib/accessibility/required.js';
+import { label as inputLabel } from '@refinitiv-ui/utils/accessibility/label.js';
+import { description as inputDescription } from '@refinitiv-ui/utils/accessibility/description.js';
+import { required as inputRequired } from '@refinitiv-ui/utils/accessibility/required.js';
 import { state } from '../decorators/state.js';
 import { property } from '../decorators/property.js';
 import { templateMap, TemplateMap } from '../directives/template-map.js';

packages/demo-block/src/demo-block.ts

@@ -7,8 +7,8 @@ import {
   CSSResultGroup,
   StyleInfo
 } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
+import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
+import { property } from '@refinitiv-ui/core/decorators/property.js';
 
 const Themes = [
   'elemental-theme/light',

packages/elements/README.md

@@ -29,10 +29,10 @@ Finally, import both elements that you want to use and its themes into your appl
 import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
 
 // import element and its Halo dark theme
-import '@refinitiv-ui/elements/lib/button';
-import '@refinitiv-ui/elements/lib/panel';
-import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
-import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
+import '@refinitiv-ui/elements/button';
+import '@refinitiv-ui/elements/panel';
+import '@refinitiv-ui/elements/button/themes/halo/dark';
+import '@refinitiv-ui/elements/panel/themes/halo/dark';
 ```
 
 Now, you can use the elements in your app.