diff --git a/docs/plugin-development.md b/docs/plugin-development.md index 81331a6..3dd0f69 100644 --- a/docs/plugin-development.md +++ b/docs/plugin-development.md @@ -37,12 +37,10 @@ Now in the new plugin folder, create a file called `package.json` with the follo "clean": "rm -rf dist" }, "dependencies": { - + // plugin specific dependencies }, "devDependencies": { - "@types/node": "^20.14.9", - "ts-node": "^10.9.2", - "typescript": "^4.9.5" + // plugin specific dev dependencies } } ``` @@ -52,26 +50,13 @@ In the new plugin folder, create a `tsconfig.json` file with the following conte ```json { "extends": "../../../tsconfig.json", - "compilerOptions": { - "outDir": "dist", - "rootDir": "src", - "lib": ["ESNext", "DOM"], - "module": "ESNext", - "target": "ESNext", - "moduleResolution": "node", - "esModuleInterop": true, - "declaration": true, - "sourceMap": true, - "strict": true, - "types": ["node"] - }, - "include": ["src/**/*"] + "include": ["src"] } ``` ### Create the Source Files -In the new plugin folder, create a `src` folder and add an `index.ts` and `pluginClass.ts` file with the following content: +In the new plugin folder, create a `src` folder and add an `index.ts` and `PluginClass.ts` file with the following content: `index.ts` @@ -82,7 +67,7 @@ export { default as PluginClass } from './PluginClass'; `PluginClass.ts` ```typescript -import { Plugin } from '@productled/core'; +import type { Plugin } from '@productled/core'; export class PluginClass implements Plugin { private key: string = "plugin-name"; @@ -91,10 +76,8 @@ export class PluginClass implements Plugin { return this.key; } - create(element: HTMLElement, conf: any, theme: Theme): void { - if (element) { - // Apply the plugin effect on the specified HTML element - } + initialize(hooks: Hook[], theme: Theme): void { + // Initialize plugin effects based on configruations } removeAll(): void { @@ -103,23 +86,20 @@ export class PluginClass implements Plugin { } ``` -### The `create` Method +### The `initialize` Method ```typescript -create(element: HTMLElement, conf: any, theme: Theme): void { - if (element) { - // Apply the plugin effect on the specified HTML element - } +initialize(hooks: Hook[], theme: Theme): void { + // Initialize plugin effects based on configruations } ``` -The `create` method takes three parameters: `element`, `conf`, and `theme`. Here's what each parameter represents: +The `initialize` method takes two parameters: `hooks`, and `theme`. Here's what each parameter represents: -- **`element`** is of type `HTMLElement`. It represents the HTML element on which the plugin will create the effect. -- **`conf`** is of type `any`. It represents the configuration object that contains properties specified in the `productled-config.json` file. These properties will be used to customize the effect created by the plugin. +- **`hooks`** is of type `Hook[]`. It represents the configuration objects that contains properties specified in the `productled-config.json` file. These properties will be used to customize the effect created by the plugin. - **`theme`** is of type `Theme`. It represents the theme object that will be used to style the effect created by the plugin. -In summary, the `create` method is responsible for creating an effect on a specified HTML element. It uses the provided configuration and theme to customize the spotlight's appearance and behavior. +In summary, the `initilaize` method is responsible for creating effects for a specific plugin on a specific route. It uses the provided configurations and theme to customize the spotlight's appearance and behavior. ### The `removeAll` Method diff --git a/packages/samples/react-sample/README.md b/packages/samples/react-sample/README.md index 3f17a95..082a452 100644 --- a/packages/samples/react-sample/README.md +++ b/packages/samples/react-sample/README.md @@ -4,9 +4,16 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo ## Available Scripts -In the project directory, you can run: +In the root directory, you can run: + +### `npm run build --workspaces'` + +Then switch to the sample directory: + +### `cd .\packages\samples\react-sample` + +Start the showcase app: -### `npm run build --workspace='@productled/spotlight'` ### `npm start` Runs the app in the development mode.\