https://github.com/screeny05/shopware-typedef
Shopware 5 Typescript definitions
https://github.com/screeny05/shopware-typedef
shopware typescript
Last synced: about 2 months ago
JSON representation
Shopware 5 Typescript definitions
- Host: GitHub
- URL: https://github.com/screeny05/shopware-typedef
- Owner: screeny05
- License: mit
- Created: 2018-01-29T13:53:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-10T09:08:17.000Z (over 6 years ago)
- Last Synced: 2025-01-11T00:47:56.121Z (3 months ago)
- Topics: shopware, typescript
- Language: TypeScript
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-shopware - shopware-typedef - Shopware 5 Typescript definitions. (Frontend Development Resources)
README
# shopware-typedef
> Shopware TypeScript typings
This package contains TypeScript type definitions for the Shopware 5 Frontend.
That includes correct types for the StateManager and other globals, `jQuery.X` and `jQuery.fn.X` extended by Shopware.
The type definitions can be used from TypeScript but also from JavaScript.
## Installation
```bash
npm install --save-dev @types/[email protected] shopware-typedef
```
## Usage
In TypeScript code it should look like this:
```typescript
///
export class ScnFoo extends $.PluginBase implements SwPluginDefinition {
init(){
console.log('hello, world!');
}
}
$.plugin('scnFoo', ScnFoo);
declare global {
interface JQuery { scnFoo(): JQuery; }
interface SwPluginsCollection { scnFoo: SwPluginPrototypeConstructor; }
}
```
The type `SwPluginPrototypeConstructor` is a constructor-interface for all classes extending `$.PluginBase` accepting a type `T` which indicates what you want to return. And a type `U` indicating the type of the options if any.
The constructor itself has the signature `new(name: string, element: JQuery, options?: U): T`.
If you use plain JavaScript you can still use the typings in an IDE that supports it (Atom, VS Code, PHPStorm, etc.)
```javascript
///
StateManager.addPlugin('.js--foo', 'bar');
```
You can use annotations in your JavaScript to tell your IDE what type your variables are, for example:
```javascript
/** @type {SwStateManager} */
var sman;
sman.[...] // intellisense support enabled
$.plugin('scnBar', {
/**
* @typedef {object} ScnBarOptions
* @property {string} name
* @property {number} width
*/
defaults: {
name: 'bar',
width: 100
},
init: function(){
/** @type {SwPluginPrototype} */
var me = this;
me.applyDataAttributes();
/** @type {ScnBarOptions} */
var opts = me.opts;
},
});
```
Support may vary depending on your IDE.
More Info is available in the [TypeScript Wiki](https://github.com/Microsoft/TypeScript/wiki/JSDoc-support-in-JavaScript).
### Options
You can pass the type of your plugin options as a generic to `$.PluginBase`
```typescript
interface ScnFooOptions {
width: number;
height: number;
}
export class ScnFoo extends $.PluginBase implements SwPluginDefinition {
defaults: ScnFooOptions = {
width: 100,
height: 200
}
init(){
this.applyDataAttributes();
this.opts.[...] // intellisense now available for opts
}
}
$.plugin('scnFoo', ScnFoo);
declare global {
interface JQuery { scnFoo(options?: Partial): JQuery; }
interface SwPluginsCollection { scnFoo: SwPluginPrototypeConstructor>; }
}
```
And that's about all to do for adding a plugin. Have a look into the example.ts for more help.
If you want to, you can also add a new declaration for the `StateManager.addPlugin` call, although it may not always work correctly.
```typescript
declare global {
interface SwStateManager {
addPlugin(selector: string, pluginName: 'scnFoo', config?: Partial, viewport?: string[] | string): this;
}
}
StateManager.addPlugin('.js--foo', 'scnFoo', { width: 150 });
```
## Notes
The declare global-block is necessary for all Plugins in order to get typescript to understand, that we've extended `window.$` and `window.PluginsCollection`
Be aware, that there was a Bug in the Shopware `$.plugin()`-implementation preventing developers from passing a constructor as the second argument. The Issue has been resolve in [email protected]. This is the PR for that: [#1489](https://github.com/shopware/shopware/pull/1489)
Prior sw-versions need to provide not the Class itself, but the prototype.
```typescript
interface ScnFooOptions {
width: number;
height: number;
}
export class ScnFoo extends $.PluginBase implements SwPluginDefinition {
defaults: ScnFooOptions = {
width: 100,
height: 200
}
init(){
this.applyDataAttributes();
this.opts.[...] // intellisense now available for opts
}
}
$.plugin('scnFoo', ScnFoo.prototype);
declare global {
interface JQuery { scnFoo(options?: Partial): JQuery; }
interface SwPluginsCollection { scnFoo: ScnFoo; }
}
```
## Contributions
Always welcome 💙
## License
[MIT](./LICENSE)