refactor(store): rename slice to feature (#318)

packages/html/package.json

@@ -16,14 +16,6 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
-    },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
-    },
-    "./define/vjs-frosted-skin": {
-      "types": "./dist/define/vjs-frosted-skin.d.ts",
-      "default": "./dist/define/vjs-frosted-skin.js"
     }
   },
   "main": "dist/index.js",

packages/html/src/define/vjs-frosted-skin.ts

@@ -1,3 +0,0 @@
-import { FrostedSkinElement } from '../skins/frosted';
-
-FrostedSkinElement.define();

packages/html/src/skins/frosted/index.ts

@@ -1,12 +0,0 @@
-export { FrostedSkinElement } from './skin';
-
-export {
-  create as createStore,
-  extendConfig,
-  RequestController,
-  StateController,
-  StoreAttachMixin,
-  StoreMixin,
-  StoreProviderMixin,
-  TasksController,
-} from './store';

packages/html/src/skins/frosted/skin.ts

@@ -1,57 +0,0 @@
-import type { Mixin } from '@videojs/utils/types';
-
-import { ReactiveElement } from '@lit/reactive-element';
-
-import { StoreMixin } from './store';
-
-/**
- * Frosted skin custom element.
- *
- * Uses shadow DOM with a slot for video elements. Controls will be added in future updates.
- *
- * @example Basic usage (after calling define)
- * ```html
- * <vjs-frosted-skin>
- *   <video src="video.mp4"></video>
- * </vjs-frosted-skin>
- * ```
- *
- * @example Define with default tag
- * ```ts
- * import { FrostedSkinElement } from '@videojs/html/skins/frosted';
- * FrostedSkinElement.define();
- * ```
- *
- * @example Define with custom tag
- * ```ts
- * FrostedSkinElement.define('my-player');
- * ```
- *
- * @example Define with extended store
- * ```ts
- * import { createStore } from '@videojs/store/lit';
- * import { extendConfig, FrostedSkinElement } from '@videojs/html/skins/frosted';
- *
- * const { StoreMixin } = createStore(extendConfig({ slices: [chaptersSlice] }));
- * FrostedSkinElement.define('my-player', StoreMixin);
- * ```
- */
-export class FrostedSkinElement extends ReactiveElement {
-  static tagName = 'vjs-frosted-skin';
-
-  /**
-   * Registers this element with the custom elements registry.
-   *
-   * @param tagName - Custom element tag name (defaults to 'vjs-frosted-skin')
-   * @param mixin - Mixin to apply (defaults to StoreMixin)
-   */
-  static define(tagName = this.tagName, mixin: Mixin<FrostedSkinElement, ReactiveElement> = StoreMixin): void {
-    customElements.define(tagName, mixin(this));
-  }
-
-  constructor() {
-    super();
-    const shadow = this.attachShadow({ mode: 'open' });
-    shadow.innerHTML = '<slot></slot>';
-  }
-}

packages/html/src/skins/frosted/store.ts

@@ -1,41 +0,0 @@
-import type { AnySlice, StoreConfig } from '@videojs/store';
-
-import { media } from '@videojs/core/dom';
-import { extendConfig as extendBaseConfig } from '@videojs/store';
-import { createStore } from '@videojs/store/lit';
-
-const baseConfig = {
-  slices: [...media.all],
-};
-
-/**
- * Extends frosted skin config.
- *
- * @example
- * ```ts
- * import { createStore } from '@videojs/store/lit';
- * import { extendConfig, FrostedSkinElement } from '@videojs/html/skins/frosted';
- * import { chaptersSlice } from './slices/chapters';
- *
- * const { StoreMixin } = createStore(
- *   extendConfig({ slices: [chaptersSlice] })
- * );
- *
- * FrostedSkinElement.define('my-player', El => StoreMixin(El));
- * ```
- */
-export function extendConfig<Slices extends AnySlice<HTMLMediaElement>[] = []>(
-  extension?: Partial<StoreConfig<HTMLMediaElement, Slices>>,
-) {
-  return extendBaseConfig(baseConfig, extension);
-}
-
-export const {
-  StoreMixin,
-  StoreProviderMixin,
-  StoreAttachMixin,
-  StateController,
-  RequestController,
-  TasksController,
-  create,
-} = createStore(baseConfig);

packages/html/tsdown.config.ts

@@ -6,9 +6,6 @@ import { defineConfig } from 'tsdown';
 export default defineConfig({
   entry: {
     index: 'src/index.ts',
-    'skins/frosted': 'src/skins/frosted/index.ts',
-    // 'skins/minimal': 'src/skins/minimal/index.ts',
-    'define/vjs-frosted-skin': 'src/define/vjs-frosted-skin.ts',
   },
   platform: 'browser',
   format: 'es',