New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@shopware-ag/admin-extension-sdk
Advanced tools
@shopware-ag/admin-extension-sdk - npm Package Compare versions
Comparing version 0.0.16 to 0.0.17
| { | ||
| "name": "@shopware-ag/admin-extension-sdk", | ||
| "version": "0.0.16", | ||
| "version": "0.0.17", | ||
| "repository": "git://github.com/shopware/admin-extension-sdk.git", | ||
@@ -16,3 +16,4 @@ "description": "The SDK for App iframes to communicate with the Shopware Adminstration", | ||
| "umd", | ||
| "es" | ||
| "es", | ||
| "cdn" | ||
| ], | ||
@@ -32,5 +33,6 @@ "main": "./umd/index.js", | ||
| "dev:serve": "live-server --port=8181 example-dist", | ||
| "build": "rm -rf es && rm -rf umd && npm run build:umd && npm run build:es", | ||
| "build": "rm -rf es && rm -rf umd && rm -rf cdn && npm run build:umd && npm run build:es && npm run build:cdn", | ||
| "build:umd": "tsc --project tsconfig.json --module umd --outDir \"./umd\"", | ||
| "build:es": "tsc --project tsconfig.json --outDir \"./es\"", | ||
| "build:cdn": "vite build --mode cdn", | ||
| "doc": "cd docs && npm run build", | ||
@@ -37,0 +39,0 @@ "doc:dev": "cd docs && npm run start", |
108
README.md
@@ -6,23 +6,11 @@ # Warning: | ||
| [](https://github.com/shopware/admin-extension-sdk/actions/workflows/base.yml) | ||
| # Admin Extension SDK | ||
| [](https://github.com/shopware/admin-extension-sdk/actions/workflows/tests.yml) | ||
| [](https://www.npmjs.com/package/@shopware-ag/admin-extension-sdk) | ||
| # Admin app actions | ||
| ### for the Shopware 6 app system | ||
| The `admin-extension-sdk` is a JavaScript library for all [Shopware 6](https://github.com/shopware/platform) App and Plugin developer which want an easy way to extend and customize the administration. | ||
| [Open documentation](https://shopware.github.io/admin-extension-sdk/) | ||
| [See Documentation](https://shopware.github.io/admin-extension-sdk/) | ||
| This small library is for using admin actions in your app iframes. | ||
| Your app can then extend the Administration with many different actions, customizing UI elements and more. It can send actions to the administration or receive data from it. | ||
| ```js | ||
| send('redirect', { | ||
| url: 'https://www.shopware.com', | ||
| newTab: true | ||
| }) | ||
| ``` | ||
| ## Installation | ||
| #### Using NPM: | ||
@@ -34,80 +22,64 @@ Install it to your `package.json` | ||
| Then import it in your app: | ||
| and import it in your app: | ||
| ```js | ||
| import { send } from '@shopware-ag/admin-extension-sdk'; | ||
| // import everything | ||
| import * as sw from '@shopware-ag/admin-extension-sdk'; | ||
| // or import only needed functionality | ||
| import { notification } from '@shopware-ag/admin-extension-sdk'; | ||
| ``` | ||
| #### Using CDN: | ||
| Import the source from the CDN: | ||
| Import the source from the CDN | ||
| ```js | ||
| // use the latest version available | ||
| <script src="https://unpkg.com/@shopware-ag/admin-extension-sdk"></script> | ||
| <script src="https://unpkg.com/@shopware-ag/admin-extension-sdk/cdn"></script> | ||
| // use a fix version (example here: 1.2.3) | ||
| <script src="https://unpkg.com/@shopware-ag/admin-extension-sdk@1.2.3"></script> | ||
| <script src="https://unpkg.com/@shopware-ag/admin-extension-sdk@1.2.3/cdn"></script> | ||
| ``` | ||
| Then you can access it with the global variable `AdminAppActions`. | ||
| and then you can access it with the global variable `sw`. | ||
| ```js | ||
| const { send } = AdminAppActions; | ||
| sw.notification.dispatch({ | ||
| title: 'My first notification', | ||
| message: 'This was really easy to do' | ||
| }) | ||
| ``` | ||
| ## Features | ||
| - **Works for Shopware 6 Apps and Plugins:** you can use the SDK for your plugins or apps. The API usage is identical. | ||
| - **Low learning curve:** you don't need to have knowledge about the internal of the Shopware 6 admin. The SDK hides the complicated stuff behind beautiful API. | ||
| - **Many extension capabilities:** from throwing notifications, accessing context information or extending the current UI. The feature set of the SDK will grow more and more. This gives you more possibilities and flexibility for your ideas and solutions. | ||
| - **Stable API with great backward compatibility:** don't fear Shopware updates. Breaking changes in this SDK are the exception. If you use it then your Apps and Plugins will stay stable for a long time. Without code maintenance. | ||
| - **Type safety:** the whole SDK is written in TypeScript. This provides you great autocompletion support and more safety for your Apps and Plugins. | ||
| - **Developer experience:** get a great development experience from the beginning. And it will be improved more and more in the future. | ||
| - **Lightweight:** the whole library is completely tree-shakable, dependency-free and every functionality can be imported granularly so that your bundle stays small and fast. | ||
| - Simple API | ||
| - Sending actions to the admin | ||
| - Receive data from the admin | ||
| - Extremely small footprint on app side | ||
| - Full Typescript support | ||
| ## Examples | ||
| ### Simple API | ||
| The API is very expressive and easy to learn. You just need to import our library and then you can use the send method for sending actions and receiving data. | ||
| The iframe are using only the function `send` for sending the actions. The first parameter is the action-type and the second parameter contains the options for the action. | ||
| Throw a notification: | ||
| ```js | ||
| import { send } from '@shopware-ag/admin-extension-sdk'; | ||
| send('redirect', { | ||
| url: 'https://www.shopware.com', | ||
| newTab: true, | ||
| sw.notification.dispatch({ | ||
| title: 'My first notification', | ||
| message: 'This was really easy to do' | ||
| }) | ||
| ``` | ||
| If the action has a response then you can get the information with the returned Promise value: | ||
| ```javascript | ||
| import { send } from '@shopware-ag/admin-extension-sdk'; | ||
| const pageTitle = await send('getPageTitle', {}); | ||
| Get the system currency: | ||
| ```js | ||
| const currency = await sw.context.getCurrency(); | ||
| ``` | ||
| ## Extremely small footprint on app side | ||
| The bundle size of this library is extremely small and will not grow when new actions will be defined. How is this done? The functions only execute the commands. Only types are describing the API and therefore not increase the bundle size. | ||
| Subscribe for UI locale changes: | ||
| ```js | ||
| let currentLocale = 'en-GB'; | ||
| ## Full Typescript support | ||
| Typescript provides a good developer experience for everyone using this tool. Every action and options can be autocompleted by the IDE. If you are also writing your application in Typescript you get direct feedback if you are doing a mistake in using the API. | ||
| A full auto-generated API documentation can be found in the documentation: https://shopware.github.io/admin-extension-sdk/ | ||
| ___________ | ||
| ## Recipient (only for usage in the Shopware 6 Administration): | ||
| The Shopware 6 administration listens to all messages. If a message matches an action then the given functionality will be called. Here is an example code how it can look like: | ||
| ```ts | ||
| import { on } from '@shopware-ag/admin-extension-sdk'; | ||
| on('redirect', ({ newTab, url }) => { | ||
| // call a method which redirects to the url | ||
| redirect({ newTab, url }); | ||
| sw.context.subscribeLocale(({ locale }) => { | ||
| currentLocale = locale; | ||
| }) | ||
| ``` | ||
| on('getPageTitle', () => { | ||
| // or return the value if the type needs a response | ||
| return document.title; | ||
| }) | ||
| ``` | ||
| See more examples in the [Documentation](https://shopware.github.io/admin-extension-sdk/). |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by3.33%
104267
- Number of package files
- increased by1.79%
57
- Lines of code
- increased by0.91%
1559
Worsened metrics
- Number of lines in readme file
- decreased by-25.23%
83
No dependency changes