@egjs/svelte-conveyer - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

dist/conveyer.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-conveyer
-version: 1.6.0
+version: 1.6.1
 */
@@ -46,8 +46,8 @@ 'use strict';
 /*
-Copyright (c) NAVER Corp.
+Copyright (c) 2022-present NAVER Corp.
 name: @cfcs/svelte
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/cfcs
-version: 0.0.13
+repository: https://github.com/naver/cfcs/tree/main/packages/svelte
+version: 0.1.0
 */
@@ -83,2 +83,22 @@
 
+/**
+ * @description Instead of `bind:this`, you can bind this via the `use:` directive.
+ * @category Common
+ * @see Ref
+ * @example
+ * ```html
+ * <script>
+ * import { onMount } from "svelte";
+ * import { useRef } from "@cfcs/svelte";
+ *
+ * const elementRef = useRef();
+ *
+ * onMount(() => {
+ *   console.log(elementRef.current);
+ * });
+ * </script>
+ * <div use:elementRef>Element</div>
+ * ```
+ */
+
 function useRef(defaultValue) {
@@ -97,4 +117,17 @@ var refFunction = function (value) {
 }
-function useReactive(reactiveProps) {
-  var adaptResult = core.adaptReactive(reactiveProps);
+/**
+ * @description In Svelte, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/svelte";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
+function useReactive(reactiveAdapter, props) {
+  var adaptResult = core.adaptReactive(reactiveAdapter, props);
   var reactiveState = adaptResult.state();
@@ -122,8 +155,6 @@ var writables = {};
   });
-  var reactiveEvents = reactiveProps.events || [];
+  var reactiveEvents = adaptResult.events();
   var events = reactiveEvents.reduce(function (result, name) {
     result[core.camelize("on ".concat(name))] = function (callback) {
-      internal.onMount(function () {
-        adaptResult.on(name, callback);
-      });
+      adaptResult.on(name, callback);
       internal.onDestroy(function () {
@@ -130,0 +161,0 @@ adaptResult.off(name, callback);

dist/conveyer.esm.js

@@ -7,3 +7,3 @@ /*
 repository: https://github.com/naver/egjs-conveyer
-version: 1.6.0
+version: 1.6.1
 */
@@ -44,8 +44,8 @@ import { REACTIVE_CONVEYER } from '@egjs/conveyer';
 /*
-Copyright (c) NAVER Corp.
+Copyright (c) 2022-present NAVER Corp.
 name: @cfcs/svelte
 license: MIT
 author: NAVER Corp.
-repository: https://github.com/naver/cfcs
-version: 0.0.13
+repository: https://github.com/naver/cfcs/tree/main/packages/svelte
+version: 0.1.0
 */
@@ -81,2 +81,22 @@
 
+/**
+ * @description Instead of `bind:this`, you can bind this via the `use:` directive.
+ * @category Common
+ * @see Ref
+ * @example
+ * ```html
+ * <script>
+ * import { onMount } from "svelte";
+ * import { useRef } from "@cfcs/svelte";
+ *
+ * const elementRef = useRef();
+ *
+ * onMount(() => {
+ *   console.log(elementRef.current);
+ * });
+ * </script>
+ * <div use:elementRef>Element</div>
+ * ```
+ */
+
 function useRef(defaultValue) {
@@ -95,4 +115,17 @@ var refFunction = function (value) {
 }
-function useReactive(reactiveProps) {
-  var adaptResult = adaptReactive(reactiveProps);
+/**
+ * @description In Svelte, you can create reactive components through adapters.
+ * @category Reactive
+ * @example
+ * ```ts
+ * import { useReactive } from "@cfcs/svelte";
+ *
+ * export function useReactiveComponent() {
+ *   return useReactive(REACTIVE_ADAPTER);
+ * }
+ * ```
+ */
+
+function useReactive(reactiveAdapter, props) {
+  var adaptResult = adaptReactive(reactiveAdapter, props);
   var reactiveState = adaptResult.state();
@@ -120,8 +153,6 @@ var writables = {};
   });
-  var reactiveEvents = reactiveProps.events || [];
+  var reactiveEvents = adaptResult.events();
   var events = reactiveEvents.reduce(function (result, name) {
     result[camelize("on ".concat(name))] = function (callback) {
-      onMount(function () {
-        adaptResult.on(name, callback);
-      });
+      adaptResult.on(name, callback);
       onDestroy(function () {
@@ -128,0 +159,0 @@ adaptResult.off(name, callback);

package.json

 {
   "name": "@egjs/svelte-conveyer",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Svelte Conveyer adds Drag gestures to your Native Scroll.",
@@ -73,5 +73,5 @@ "sideEffects": false,
   "dependencies": {
-    "@cfcs/svelte": "~0.0.13",
-    "@egjs/conveyer": "~1.6.0"
+    "@cfcs/svelte": "^0.1.0",
+    "@egjs/conveyer": "~1.6.1"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

44903

increased by3.29%

Lines of code

617

increased by10.38%

Dependency changes

• + Added@cfcs/svelte@0.1.0(transitive)

• - Removed@cfcs/core@0.0.26(transitive)

• - Removed@cfcs/svelte@0.0.26(transitive)

• Updated@cfcs/svelte@^0.1.0

• Updated@egjs/conveyer@~1.6.1