Component registration updated

.github/workflows/release.yml

@@ -52,7 +52,6 @@ jobs:
               "@ollion/flow-core-config":"packages/flow-core-config/CHANGELOG.md",
               "@ollion/flow-form-builder":"packages/flow-form-builder/CHANGELOG.md",
               "@ollion/flow-lineage":"packages/flow-lineage/CHANGELOG.md",
-              "@ollion/flow-dashboard":"packages/flow-dashboard/CHANGELOG.md",
               "@ollion/custom-elements-manifest-to-types":"packages/custom-elements-manifest-to-types/CHANGELOG.md"
             }
 

.storybook/code-sandbox.js

@@ -4,7 +4,8 @@ export function getCodeSandBoxUrl(story) {
 	const params = getParameters({
 		files: {
 			"index.js": {
-				content: `import "@ollion/flow-core";
+				content: `import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 		  import "@ollion/flow-system-icon";
 		  document.getElementById("app").innerHTML =\`${story}\`
 		  `,

.storybook/preview.ts

@@ -6,14 +6,24 @@ import AwsIconPack from "@ollion/flow-aws-icon/dist/types/icon-pack";
 
 import { ConfigUtil } from "@ollion/flow-core-config";
 import { changeRoute } from "./utils";
-import "@ollion/flow-core";
-import "@ollion/flow-log";
-import "@ollion/flow-code-editor";
-import "@ollion/flow-table";
-import "@ollion/flow-md-editor";
-import "@ollion/flow-form-builder";
-import "@ollion/flow-lineage";
-import "@ollion/flow-dashboard";
+import { register, flowCoreElements } from "@ollion/flow-core";
+
+import { FLog } from "@ollion/flow-log";
+import { FCodeEditor } from "@ollion/flow-code-editor";
+import { flowTableElements } from "@ollion/flow-table";
+import { FMDEditor } from "@ollion/flow-md-editor";
+import { flowFormBuilderElements } from "@ollion/flow-form-builder";
+import { FLineage } from "@ollion/flow-lineage";
+
+register([
+	...flowCoreElements,
+	...flowTableElements,
+	...flowFormBuilderElements,
+	FLog,
+	FCodeEditor,
+	FMDEditor,
+	FLineage
+]);
 
 import { setCustomElementsManifest, setCustomElements } from "@storybook/web-components";
 import { themes } from "@storybook/theming";
@@ -126,9 +136,6 @@ async function run() {
 	const tableCustomElements = await (
 		await fetch(new URL("../packages/flow-table/custom-elements.json", import.meta.url))
 	).json();
-	const dashboardCustomElements = await (
-		await fetch(new URL("../packages/flow-dashboard/custom-elements.json", import.meta.url))
-	).json();
 
 	const mdEditorCustomElements = await (
 		await fetch(new URL("../packages/flow-md-editor/custom-elements.json", import.meta.url))
@@ -146,16 +153,14 @@ async function run() {
 
 	setCustomElementsManifest(mdEditorCustomElements);
 	setCustomElements(mdEditorCustomElements);
-	setCustomElementsManifest(dashboardCustomElements);
-	setCustomElements(dashboardCustomElements);
 }
 
 run();
 
 // 404 error state --start--
-const el = document.body.querySelector(".sb-errordisplay.sb-wrapper");
-const errorMessage = el.querySelector("#error-message.sb-heading");
-const codeMessage = el.querySelector(".sb-errordisplay_code");
+const el = document.body.querySelector(".sb-errordisplay.sb-wrapper")!;
+const errorMessage = el.querySelector<HTMLElement>("#error-message.sb-heading")!;
+const codeMessage = el.querySelector<HTMLElement>(".sb-errordisplay_code")!;
 const url = new URL(window.location.href);
 const url_id = url.searchParams.get("id");
 
@@ -184,7 +189,7 @@ if (el) {
 	el?.insertAdjacentHTML("afterbegin", paraDefine);
 	codeMessage.style.display = "none";
 	errorMessage.style.display = "none";
-	const homeButton = el.querySelector("#home-button");
+	const homeButton = el.querySelector<HTMLElement>("#home-button")!;
 	homeButton.addEventListener("click", changePath);
 }
 

README.md

@@ -56,7 +56,8 @@ _Note:_ after installation re-start your application.
 Copy and import the below snippet into your startup file. In **VueJS:** (src/main.ts or main.js), **Angular:** (src/main.ts), **React:** (src/index.tsx or index.jsx)
 
 ```JavaScript
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 ```
 
 <br>
@@ -98,7 +99,8 @@ npm i --save @ollion/flow-system-icon
 ### 2️⃣ Import the icon pack
 
 ```javascript
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 import "@ollion/flow-system-icon";
 ```
 

docs/component-registration.md

@@ -0,0 +1,43 @@
+### Method 1
+
+- To register all component of `@ollion/flow-core`, use the following snippet.
+
+```javascript
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
+```
+
+### Method 2
+
+- Suppose you are only going to use f-div and f-button, and you want to import and package only these 2 components in your project, then use the following snippet.
+
+```javascript
+import { register, FDiv, FButton } from "@ollion/flow-core";
+register([FDiv, FButton]);
+```
+
+<hr/>
+
+### Note 1
+
+- Following packages has single element hence you need to import single element from it.
+
+```javascript
+import { FLog } from "@ollion/flow-log";
+import { FCodeEditor } from "@ollion/flow-code-editor";
+import { FMDEditor } from "@ollion/flow-md-editor";
+import { FLineage } from "@ollion/flow-lineage";
+
+register([FLog, FCodeEditor, FMDEditor, FLineage]);
+```
+
+### Note 2
+
+- Following packages has 2 or more element, and almost all time all elements are required to register along with flow-core
+
+```javascript
+import { flowTableElements } from "@ollion/flow-table";
+import { flowFormBuilderElements } from "@ollion/flow-form-builder";
+
+register([...flowTableElements, ...flowFormBuilderElements]);
+```

package.json

@@ -74,7 +74,7 @@
     "@ollion/flow-aws-icon": "latest",
     "@ollion/flow-code-editor": "workspace:*",
     "@ollion/flow-core": "workspace:*",
-    "@ollion/flow-dashboard": "workspace:*",
+    "@ollion/flow-core-config": "workspace:*",
     "@ollion/flow-form-builder": "workspace:*",
     "@ollion/flow-gcp-icon": "latest",
     "@ollion/flow-lineage": "workspace:*",

packages/flow-code-editor/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Change Log
 
+## [2.0.0] - 2024-04-20
+
+### Major/Breaking Changes
+
+- Auto web component registration was removed to facilitate tree shaking.
+- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md)
+
 ## [1.1.0] - 2023-11-27
 
 ### Minor Changes

packages/flow-code-editor/README.md

@@ -19,8 +19,9 @@ npm i --save @ollion/flow-code-editor
 Paste the below snippet in your project and add your application startup/runtime code to it.
 
 ```javascript
-import "@ollion/flow-core";
-import "@ollion/flow-code-editor";
+import { register, flowCoreElements } from "@ollion/flow-core";
+import { FCodeEditor } from "@ollion/flow-code-editor";
+register([...flowCoreElements, FCodeEditor]);
 ```
 
 <br>

packages/flow-code-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-code-editor",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Code editor component for flow library",
   "module": "dist/flow-code-editor.es.js",
   "main": "dist/flow-code-editor.es.js",

packages/flow-code-editor/src/components/f-code-editor/f-code-editor.ts

@@ -1,5 +1,5 @@
 import { html, PropertyValueMap, unsafeCSS } from "lit";
-import { FRoot, flowElement, FButton } from "@ollion/flow-core";
+import { FRoot, FButton } from "@ollion/flow-core";
 import globalStyle from "./f-code-editor-global.scss?inline";
 import * as monaco from "monaco-editor";
 
@@ -26,7 +26,6 @@ export type FCodeEditorServices = monaco.editor.IStandaloneEditorConstructionOpt
 
 export type FCodeEditorStateProp = "subtle" | "default" | "secondary";
 
-@flowElement("f-code-editor")
 export class FCodeEditor extends FRoot {
 	/**
 	 * css loaded from scss file

packages/flow-code-editor/vite.config.ts

@@ -16,7 +16,21 @@ export default defineConfig({
 			// If we want to publish standalone components we don't externalize lit,
 			// if you are going to use lit in your own project, you can make it a dep instead.
 			// external: /^lit/, <-- comment this line
-			external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/, "monaco-editor"],
+			external: [
+				/^@ollion/,
+				"axios",
+				"emoji-mart",
+				"lodash-es",
+				/^lit/,
+				"rxjs",
+				"vanilla-colorful",
+				"mark.js",
+				"@emoji-mart/data",
+				"@lit-labs/virtualizer",
+				"flatpickr",
+				"@floating-ui/dom",
+				"monaco-editor"
+			],
 			output: {
 				globals: {
 					"@ollion/flow-core": "@ollion/flow-core"

packages/flow-core/CHANGELOG.md

@@ -2,11 +2,12 @@
 
 # Change Log
 
-## [2.9.10] - 2024-04-15
+## [3.0.0] - 2024-04-29
 
-### Bug Fixes
+### Major/Breaking Changes
 
-- `f-select` : call `updateDimentions` only while opening.
+- Auto web component registration was removed to facilitate tree shaking.
+- To register component manually please check [here](https://github.com/ollionorg/flow-core/blob/main/docs/component-registration.md)
 
 ## [2.9.9] - 2024-04-04
 

packages/flow-core/README.md

@@ -56,7 +56,8 @@ _Note:_ after installation re-start your application.
 Copy and import the below snippet into your startup file. In **VueJS:** (src/main.ts or main.js), **Angular:** (src/main.ts), **React:** (src/index.tsx or index.jsx)
 
 ```JavaScript
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 ```
 
 <br>
@@ -98,7 +99,8 @@ npm i --save @ollion/flow-system-icon
 ### 2️⃣ Import the icon pack
 
 ```javascript
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 import "@ollion/flow-system-icon";
 ```
 

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.9.10",
+  "version": "3.0.0",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",
@@ -13,7 +13,7 @@
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json",
     "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
     "test": "web-test-runner ./src/**/*.test.ts --node-resolve --port 8090 --concurrency 1",
-    "test:file": " web-test-runner --node-resolve --port 8090 --concurrency 1",
+    "test:file": " web-test-runner --node-resolve --port 8090 --concurrency 1 --debug",
     "test:watch": "pnpm run build && web-test-runner ./src/**/*.test.ts --node-resolve --watch --port 8090 --concurrency 1"
   },
   "keywords": [
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.1",
     "@open-wc/testing": "^3.1.5",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "29.5.5",
     "@types/lodash-es": "^4.17.6",
     "@types/mark.js": "^8.11.12",
@@ -51,6 +52,7 @@
     "fs-extra": "^11.1.1",
     "lit-html": "^3.1.0",
     "prettier": "2.6.2",
+    "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.52.3",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",

packages/flow-core/src/components/f-accordion/f-accordion.test.ts

@@ -1,10 +1,11 @@
 import { html, fixture, expect } from "@open-wc/testing";
 // importing flow-core components
-import "@ollion/flow-core";
+import { register, flowCoreElements, FAccordion, FIconButton, ConfigUtil } from "@ollion/flow-core";
+
+register(flowCoreElements);
 import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack";
 // setting icon pack for testing icon related test cases
 
-import { FAccordion, FIconButton, ConfigUtil } from "@ollion/flow-core";
 ConfigUtil.setConfig({ iconPack: IconPack });
 
 describe("f-accordion", () => {

packages/flow-core/src/components/f-accordion/f-accordion.ts

@@ -4,7 +4,7 @@ import eleStyle from "./f-accordion.scss?inline";
 import globalStyle from "./f-accordion-global.scss?inline";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FDiv, FDivPaddingProp } from "../f-div/f-div";
-import { flowElement, generateId } from "./../../utils";
+import { generateId } from "./../../utils";
 import { injectCss } from "@ollion/flow-core-config";
 
 injectCss("f-accordion", globalStyle);
@@ -16,8 +16,9 @@ export type FAccordionCustomEvent = {
 };
 
 export type FAccordionPadding = FDivPaddingProp;
-@flowElement("f-accordion")
+
 export class FAccordion extends FRoot {
+	static readonly tagName = "f-accordion";
 	/**
 	 * css loaded from scss file
 	 */

packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.test.ts

@@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing";
 import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack";
 
 // importing flow-core components
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 
 import { FBreadcrumb, ConfigUtil } from "@ollion/flow-core";
 

packages/flow-core/src/components/f-breadcrumb/f-breadcrumb.ts

@@ -4,7 +4,7 @@ import eleStyle from "./f-breadcrumb.scss?inline";
 import globalStyle from "./f-breadcrumb-global.scss?inline";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FDiv } from "../f-div/f-div";
-import { flowElement } from "../../utils";
+
 import { FText } from "../f-text/f-text";
 import { FPopover } from "../f-popover/f-popover";
 
@@ -20,8 +20,8 @@ export type FBreadcrumbs = FBreadCrumbsProp[];
 export type FBreadcrumbSize = (typeof sizes)[number];
 export type FBreadcrumbVariant = (typeof variants)[number];
 
-@flowElement("f-breadcrumb")
 export class FBreadcrumb extends FRoot {
+	static readonly tagName = "f-breadcrumb";
 	/**
 	 * css loaded from scss file
 	 */

packages/flow-core/src/components/f-button/f-button.test.ts

@@ -2,7 +2,8 @@ import { html, fixture, expect } from "@open-wc/testing";
 import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack";
 
 // import flow-core elements
-import "@ollion/flow-core";
+import { register, flowCoreElements } from "@ollion/flow-core";
+register(flowCoreElements);
 
 import { FButton, FIcon, ConfigUtil, FCounter } from "@ollion/flow-core";
 // importing `loadingSVG` to cross check

packages/flow-core/src/components/f-button/f-button.ts

@@ -13,7 +13,7 @@ import getCustomFillColor from "../../utils/get-custom-fill-color";
 import getTextContrast from "../../utils/get-text-contrast";
 import { FIcon } from "../f-icon/f-icon";
 import { FCounter } from "../f-counter/f-counter";
-import { flowElement } from "./../../utils";
+
 import { injectCss } from "@ollion/flow-core-config";
 
 export type FButtonState =
@@ -30,8 +30,9 @@ injectCss("f-button", globalStyle);
 /**
  * @summary Buttons allow users to perform an action or to initiate a new function.
  */
-@flowElement("f-button")
+
 export class FButton extends FRoot {
+	static readonly tagName = "f-button";
 	/**
 	 * css loaded from scss file
 	 */