@egjs/svelte-imready
Version:
This svelte module is used to wait for the image or video to be ready.
261 lines (242 loc) • 7.49 kB
JavaScript
/*
Copyright (c) NAVER Corp.
name: @egjs/svelte-imready
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-imready
version: 1.2.2
*/
;
var core = require('@cfcs/core');
var internal = require('svelte/internal');
var store = require('svelte/store');
var imready = require('@egjs/imready');
/*
Copyright (c) NAVER Corp.
name: @cfcs/svelte
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/cfcs
version: 0.0.24
*/
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/**
* @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();
var writables = {};
var names = Object.keys(reactiveState);
var methods = adaptResult.methods();
for (var name in reactiveState) {
writables[name] = store.writable(reactiveState[name]);
}
internal.onMount(function () {
adaptResult.mounted();
var inst = adaptResult.instance();
names.forEach(function (name) {
inst.subscribe(name, function (value) {
writables[name].set(value);
});
});
adaptResult.init();
});
internal.onDestroy(function () {
adaptResult.destroy();
});
var reactiveEvents = adaptResult.events();
var events = reactiveEvents.reduce(function (result, name) {
result[core.camelize("on ".concat(name))] = function (callback) {
adaptResult.on(name, callback);
internal.onDestroy(function () {
adaptResult.off(name, callback);
});
};
return result;
}, {});
return __assign(__assign(__assign({}, writables), methods), events);
}
/**
* Svelte hook to check if the images or videos are loaded.
* @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.
* @memberof SvelteImReady
* @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
* @example
* ```js
* import { useImReady } from "@egjs/svelte-imready";
*
* const {
* register,
* isReady,
* isPreReady,
* preReadyCount,
* readyCount,
* totalCount,
* } = useImReady({
* selector: "img",
* });
* // <div use:register ></div>
* ```
*/
function useImReady(props) {
if (props === void 0) {
props = {};
}
var result = useReactive(imready.REACTIVE_IMREADY, function () {
return props;
});
return Object.assign(result, {
register: function (element) {
result.add(element);
return {
destroy: function () {
return;
}
};
}
});
}
/**
* Svelte hook to check if the images or videos are loaded. (only `usePreReadyElement`, `usePreReady` and `useError` are true) Since this is deprecated, use useImReady instead.
* @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.(`usePreReadyElement`, `usePreReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요.
* @deprecated
* @memberof SvelteImReady
* @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
* @example
* ```js
* import { usePreReadyElement } from "@egjs/svelte-imready";
*
* const {
* register,
* preReadyCount,
* isPreReady,
* hasError,
* } = usePreReadyElement({
* selector: "img",
* });
* // <div use:register></div>
* ```
*/
function usePreReadyElement(props) {
if (props === void 0) {
props = {};
}
return useImReady(props);
}
/**
* Svelte hook to check if the images or videos are loaded. (only `useReadyElement`, `useReady` and `useError` are true) Since this is deprecated, use useImReady instead.
* @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.(`useReadyElement`, `useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요.
* @deprecated
* @memberof SvelteImReady
* @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
* @example
* ```js
* import { useReadyElement } from "@egjs/svelte-imready";
*
*
* const {
* register,
* readyCount,
* isReady,
* hasError,
* } = useReadyElement({
* selector: "img",
* });
* // <div use:register></div>
* ```
*/
function useReadyElement(props) {
if (props === void 0) {
props = {};
}
return useImReady(props);
}
/**
* Svelte hook to check if the images or videos are loaded. (only usePreReady and useError are true) Since this is deprecated, use useImReady instead.
* @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.(usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.
* @deprecated
* @memberof SvelteImReady
* @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
* @example
* ```js
* import { usePreReady } from "@egjs/svelte-imready";
*
* const {
* register,
* isPreReady,
* hasError,
* } = usePreReady({
* selector: "img",
* });
* // <div use:register></div>
* ```
*/
function usePreReady(props) {
if (props === void 0) {
props = {};
}
return useImReady(props);
}
/**
* Svelte hook to check if the images or videos are loaded. (only `useReady` and `useError` are true) Since this is deprecated, use useImReady instead.
* @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(`useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요.
* @deprecated
* @memberof SvelteImReady
* @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
* @example
* ```js
* import { useReady } from "@egjs/react-imready";
*
* const {
* register,
* isReady,
* hasError,
* } = useReady({
* selector: "img",
* });
* // <div use:register></div>
* ```
*/
function useReady(props) {
if (props === void 0) {
props = {};
}
return useImReady(props);
}
exports.useImReady = useImReady;
exports.usePreReady = usePreReady;
exports.usePreReadyElement = usePreReadyElement;
exports.useReady = useReady;
exports.useReadyElement = useReadyElement;
//# sourceMappingURL=imready.cjs.js.map