@smui/common - npm Package Compare versions

Comparing version 8.0.0-beta.2 to 8.0.0-beta.3

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [8.0.0-beta.3](https://github.com/hperrin/svelte-material-ui/compare/v8.0.0-beta.2...v8.0.0-beta.3) (2024-12-22)
+
+
+### Bug Fixes
+
+* sigh, svelte 5 doesn't support what classAdderBuilder needs, so it had to be refactored ([a4df13c](https://github.com/hperrin/svelte-material-ui/commit/a4df13c247ca3ef5bf41df75d82ad15b895f3167))
+
+
+
+
+
 # [8.0.0-beta.2](https://github.com/hperrin/svelte-material-ui/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2024-12-13)
@@ -8,0 +19,0 @@

dist/classadder/index.d.ts

@@ -1,2 +0,2 @@
-export type { ClassAdderInternals } from './ClassAdder.types.js';
-export * from './classAdderBuilder.js';
+import ClassAdder from './ClassAdder.svelte';
+export { ClassAdder };

dist/classadder/index.js

@@ -1,2 +0,3 @@
-export * from './classAdderBuilder.js';
+import ClassAdder from './ClassAdder.svelte';
+export { ClassAdder };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@smui/common",
-  "version": "8.0.0-beta.2",
+  "version": "8.0.0-beta.3",
   "description": "Svelte Material UI - Common",
@@ -79,13 +79,12 @@ "type": "module",
   "dependencies": {
-    "@material/dom": "^14.0.0",
-    "svelte2tsx": "^0.7.26"
+    "@material/dom": "^14.0.0"
   },
   "devDependencies": {
     "@tsconfig/svelte": "^5.0.4",
-    "sass": "^1.81.0",
-    "svelte-check": "^4.0.9",
+    "sass": "^1.83.0",
+    "svelte-check": "^4.1.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
-  "gitHead": "cdb983378b3a26e5e745f3e250ad52636d2d761f"
+  "gitHead": "9effccdf972b19a901a9b512981844e71182596f"
 }

README.md

@@ -418,22 +418,36 @@ # Svelte Material UI - Common Components
 
-A base component that adds a class to an element. The ClassAdder is used to provide simple components. It usually uses the `SmuiElement` component shown above, but you can specify a different component for it to use.
+Use this to make a ClassAdder component.
 
-### Props / Defaults
+```svelte
+<ClassAdder
+  _smuiClass="my-added-class"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
 
-- `component`: `(depends on context)` - The component to extend. Usually it is set to `SmuiElement`.
-- `tag`: `(depends on context)` - The HTML tag name `SmuiElement` will use.
-- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
-- `class`: `''` - A CSS class string.
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
 
-## classAdderBuilder
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
 
-Use this to build a ClassAdder component. ClassAdder components are useful for reducing the size of your bundle. If you have tons of simple components that just need to add classes/props or set a context, using ClassAdder components means there's only one actual Svelte component in your bundle for all of these many tiny components.
+  let element: ReturnType<C>;
 
-```js
-import { classAdderBuilder } from '@smui/common/classadder';
-
-export default classAdderBuilder({
-  class: 'my-added-class',
-  tag: 'div',
-});
+  export function getElement() {
+    return element.getElement();
+  }
+</script>
 ```
@@ -443,10 +457,35 @@
 
-```js
-import { classAdderBuilder } from '@smui/common/classadder';
-import Button from '@smui/button';
+```svelte
+<ClassAdder
+  _smuiClass="my-added-class"
+  component={Button as unknown as SmuiComponent}
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
 
-export default classAdderBuilder({
-  class: 'my-added-class',
-  component: Button,
-});
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
+  import Button from '@smui/button';
+
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>
 ```
@@ -458,5 +497,5 @@
 - `tag`: `'div'` - An HTML tag name. (Only means anything for the `SmuiElement` component.)
-- `class`: `''` - The class to add.
-- `classMap`: `{}` - A map of classes to contexts. The context should resolve to a Svelte store, and the class will be added if the Svelte store's value is true.
-- `contexts`: `{}` - A map of contexts to values to set for them.
-- `props`: `{}` - A map of props to add to the element.
+- `_smuiClass`: `''` - The class to add.
+- `_smuiClassMap`: `{}` - A map of classes to contexts. The context should resolve to a Svelte store, and the class will be added if the Svelte store's value is true.
+- `_smuiContexts`: `{}` - A map of contexts to values to set for them.
+- `_smuiProps`: `{}` - A map of props to add to the element.

src/ambient-common.d.ts

 /// <reference types="svelte" />
-/// <reference types="svelte2tsx/svelte-jsx" />
 
@@ -4,0 +3,0 @@ declare namespace svelteHTML {

src/classadder/index.d.ts

@@ -1,3 +0,3 @@
-export type { ClassAdderInternals } from './ClassAdder.types.js';
+import ClassAdder from './ClassAdder.svelte';
 
-export * from './classAdderBuilder.js';
+export { ClassAdder };

src/classadder/index.ts

@@ -1,3 +0,3 @@
-export type { ClassAdderInternals } from './ClassAdder.types.js';
+import ClassAdder from './ClassAdder.svelte';
 
-export * from './classAdderBuilder.js';
+export { ClassAdder };

No alert changes

Improved metrics

Dependency count

1

decreased by-50%

Number of lines in readme file

499

increased by8.48%

Worsened metrics

Total package byte prevSize

166486

decreased by-2.91%

Number of package files

97

decreased by-10.19%

Lines of code

1792

decreased by-5.98%

Dependency changes

• - Removedsvelte2tsx@^0.7.26

• - Removed@ampproject/remapping@2.3.0(transitive)

• - Removed@jridgewell/gen-mapping@0.3.8(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/estree@1.0.6(transitive)

• - Removedacorn@8.14.0(transitive)

• - Removedacorn-typescript@1.4.13(transitive)

• - Removedaria-query@5.3.2(transitive)

• - Removedaxobject-query@4.1.0(transitive)

• - Removedclsx@2.1.1(transitive)

• - Removeddedent-js@1.0.1(transitive)

• - Removedesm-env@1.2.2(transitive)

• - Removedesrap@1.4.3(transitive)

• - Removedis-reference@3.0.3(transitive)

• - Removedlocate-character@3.0.0(transitive)

• - Removedlower-case@2.0.2(transitive)

• - Removedmagic-string@0.30.17(transitive)

• - Removedno-case@3.0.4(transitive)

• - Removedpascal-case@3.1.2(transitive)

• - Removedsvelte@5.19.1(transitive)

• - Removedsvelte2tsx@0.7.34(transitive)

• - Removedtypescript@5.7.3(transitive)

• - Removedzimmerframe@1.1.2(transitive)