pds-dev-kit-web-test 0.2.48 → 0.2.50

package/dist/src/sub/DynamicLayout/DynamicLayout.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { DynamicLayoutProps } from './types';
-declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents }: DynamicLayoutProps): JSX.Element;
+declare function DynamicLayout({ device, mode, isPreview, sections, scrollDownTargetSectionId, editingSectionId, navigationHandler, sectionActionHandler, onClickEditSection, programmedSectionComponents, config }: DynamicLayoutProps): JSX.Element;
 export default DynamicLayout;

package/dist/src/sub/DynamicLayout/DynamicLayout.js

@@ -25,7 +25,7 @@ var EditModeSectionMatcher_1 = require("./components/EditModeSectionMatcher");
 var SectionMatcher_1 = require("./components/SectionMatcher");
 var dynamicLayoutContext_1 = require("./dynamicLayoutContext");
 function DynamicLayout(_a) {
-    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents;
+    var device = _a.device, _b = _a.mode, mode = _b === void 0 ? 'NORMAL' : _b, isPreview = _a.isPreview, sections = _a.sections, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, navigationHandler = _a.navigationHandler, sectionActionHandler = _a.sectionActionHandler, onClickEditSection = _a.onClickEditSection, programmedSectionComponents = _a.programmedSectionComponents, config = _a.config;
     var filteredSortedSection = __spreadArray([], sections, true).filter(function (section) { return section.display; })
         .sort(function (a, b) { return a.order - b.order; });
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
@@ -36,7 +36,8 @@ function DynamicLayout(_a) {
             navigationHandler: navigationHandler,
             sectionActionHandler: sectionActionHandler,
             editingSectionId: editingSectionId,
-            programmedSectionComponents: programmedSectionComponents
+            programmedSectionComponents: programmedSectionComponents,
+            config: config
         } }, { children: [mode === 'EDIT' && onClickEditSection && ((0, jsx_runtime_1.jsx)(EditModeSectionMatcher_1.EditModeSectionMatcher, { editingSectionId: editingSectionId, scrollDownTargetSectionId: scrollDownTargetSectionId, filteredSortedSection: filteredSortedSection, onClickEditSection: onClickEditSection })), mode !== 'EDIT' &&
                 (iframeSection ? ((0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id)) : (filteredSortedSection.map(function (section) { return (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id); })))] })));
 }

package/dist/src/sub/DynamicLayout/dynamicLayoutContext.js

@@ -4,5 +4,8 @@ exports.dynamicLayoutContext = void 0;
 var react_1 = require("react");
 exports.dynamicLayoutContext = (0, react_1.createContext)({
     device: 'DESKTOP',
-    mode: 'NORMAL'
+    mode: 'NORMAL',
+    config: {
+        googleFontsApiKey: ''
+    }
 });

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/useGoogleFonts.js

@@ -1,123 +1,19 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(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);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var getGoogleFontCss_1 = __importDefault(require("../../../../../../../GoogleFontkit/api/getGoogleFontCss"));
-var getGoogleWebFonts_1 = __importDefault(require("../../../../../../../GoogleFontkit/api/getGoogleWebFonts"));
-var createStyleSheet_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/createStyleSheet"));
-var extractFontStyles_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/extractFontStyles"));
-var fillStyleSheet_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/fillStyleSheet"));
-var getFontId_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/getFontId"));
-var isStyleSheetExists_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/isStyleSheetExists"));
-var parseFontVariants_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/parseFontVariants"));
+var dynamicLayoutContext_1 = require("../../../../../../../DynamicLayout/dynamicLayoutContext");
+var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
 function useGoogleFonts(_a) {
     var fonts = _a.fonts;
+    var googleFontsApiKey = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext).config.googleFontsApiKey;
     (0, react_1.useEffect)(function () {
         fonts.forEach(function (fontFamily) {
             var parsedFontFamily = fontFamily.substring(7);
-            var fontId = (0, getFontId_1.default)(parsedFontFamily);
-            if ((0, isStyleSheetExists_1.default)(fontId)) {
-                return;
-            }
-            (0, createStyleSheet_1.default)(fontId, false);
-            getFonts(parsedFontFamily);
+            (0, callGoogleFontCSSAndApply_1.default)(googleFontsApiKey, parsedFontFamily);
         });
-        function getCss(font) {
-            return __awaiter(this, void 0, void 0, function () {
-                var css, fontStyles;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, (0, getGoogleFontCss_1.default)({
-                                family: "".concat(font.family).concat((0, parseFontVariants_1.default)(font.variants, {
-                                    prefix: ':wght@',
-                                    separator: ';'
-                                })),
-                                'font-display': 'swap'
-                            })];
-                        case 1:
-                            css = _a.sent();
-                            fontStyles = (0, extractFontStyles_1.default)(css);
-                            (0, fillStyleSheet_1.default)(font.id, fontStyles[font.id]);
-                            return [2 /*return*/];
-                    }
-                });
-            });
-        }
-        function getFonts(fontFamily) {
-            return __awaiter(this, void 0, void 0, function () {
-                var items, googleFonts, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 2, , 3]);
-                            return [4 /*yield*/, (0, getGoogleWebFonts_1.default)({
-                                    key: 'AIzaSyDvOkXcd-jqqD1z1P-RmIBM9RzGpEXRwV0',
-                                    family: fontFamily
-                                })];
-                        case 1:
-                            items = (_a.sent()).items;
-                            googleFonts = items.map(function (item) { return (__assign(__assign({}, item), { id: (0, getFontId_1.default)(item.family) })); });
-                            googleFonts.forEach(function (font) { return getCss(font); });
-                            return [3 /*break*/, 3];
-                        case 2:
-                            e_1 = _a.sent();
-                            // eslint-disable-next-line no-console
-                            console.error(e_1);
-                            return [3 /*break*/, 3];
-                        case 3: return [2 /*return*/];
-                    }
-                });
-            });
-        }
     }, [fonts]);
 }
 exports.default = useGoogleFonts;

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -224,6 +224,9 @@ export type DynamicLayoutProps = {
     sectionActionHandler?: (action: TypeOfSectionAction) => void;
     programmedSectionComponents?: IProgrammedSectionComponents;
     width?: number;
+    config: {
+        googleFontsApiKey: string;
+    };
 };
 export type NavHandlerAction = {
     openNewTab: boolean;

package/dist/src/sub/GoogleFontkit/constants.js

@@ -11,10 +11,14 @@ exports.CATEGORIES = [
     'handwriting',
     'monospace'
 ];
-exports.SORTS = ['alpha', 'date', 'popularity', 'trending'];
+exports.SORTS = ['trending', 'popularity', 'date', 'alpha'];
 exports.SUBSETS = [
+    'korean',
+    'latin',
+    'latin-ext',
     'arabic',
     'bengali',
+    'chinese-hongkong',
     'chinese-simplified',
     'chinese-traditional',
     'cyrillic',
@@ -28,9 +32,6 @@ exports.SUBSETS = [
     'japanese',
     'kannada',
     'khmer',
-    'korean',
-    'latin',
-    'latin-ext',
     'malayalam',
     'myanmar',
     'oriya',
@@ -38,5 +39,6 @@ exports.SUBSETS = [
     'tamil',
     '​telugu',
     'thai',
+    'tibetan',
     'vietnamese'
 ];

package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.js

@@ -64,11 +64,12 @@ function GoogleFontsList(_a) {
     var apiKey = _a.apiKey, sort = _a.sort, children = _a.children;
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
     var _c = (0, react_1.useState)([]), fonts = _c[0], setFonts = _c[1];
-    var _d = (0, react_1.useState)({
+    var _d = (0, react_1.useState)([]), filteredFonts = _d[0], setFilteredFonts = _d[1];
+    var _e = (0, react_1.useState)({
         searchQuery: '',
         categories: DEFAULT_CATEGORIES,
         subsets: []
-    }), filterOptions = _d[0], setFilterOptions = _d[1];
+    }), filterOptions = _e[0], setFilterOptions = _e[1];
     (0, react_1.useEffect)(function () {
         function call() {
             return __awaiter(this, void 0, void 0, function () {
@@ -92,6 +93,32 @@ function GoogleFontsList(_a) {
         }
         call();
     }, [apiKey, sort]);
+    (0, react_1.useEffect)(function () {
+        function getFilteredFontsAsync() {
+            return new Promise(function (resolve) {
+                var filteredFonts = fonts.filter(function (font) {
+                    var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
+                    var isSelectedCategory = categories.includes(font.category);
+                    var query = searchQuery.toLocaleLowerCase().trim();
+                    var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
+                    if (!matchSearchQuery) {
+                        return false;
+                    }
+                    var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
+                    if (isSelectedCategory && hasSomeScript) {
+                        return true;
+                    }
+                    return false;
+                });
+                resolve(filteredFonts);
+            });
+        }
+        setIsLoading(true);
+        getFilteredFontsAsync().then(function (res) {
+            setFilteredFonts(res);
+            setIsLoading(false);
+        });
+    }, [filterOptions, fonts]);
     function changeSort(sortOption) {
         return __awaiter(this, void 0, void 0, function () {
             var items;
@@ -106,33 +133,19 @@ function GoogleFontsList(_a) {
                     case 1:
                         items = (_a.sent()).items;
                         setFonts(items.map(function (item) { return (__assign(__assign({}, item), { id: (0, getFontId_1.default)(item.family) })); }));
-                        setIsLoading(false);
                         return [2 /*return*/];
                 }
             });
         });
     }
-    function changeFilterOption(arg) {
+    function changeFilterOption(arg, setLoading) {
         var name = arg.name, value = arg.value;
+        setLoading && setIsLoading(true);
         setFilterOptions(function (prev) {
             var _a;
             return (__assign(__assign({}, prev), (_a = {}, _a[name] = value, _a)));
         });
     }
-    var filteredFonts = fonts.filter(function (font) {
-        var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
-        var isSelectedCategory = categories.includes(font.category);
-        var query = searchQuery.toLocaleLowerCase().trim();
-        var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
-        if (!matchSearchQuery) {
-            return false;
-        }
-        var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
-        if (isSelectedCategory && hasSomeScript) {
-            return true;
-        }
-        return false;
-    });
     return children({
         isLoading: isLoading,
         fonts: fonts,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,6 +1,7 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.48]
+## [v0.2.50]
 ## 기준 pds-dev-kit-web 버전 @2.2.10
 ### sub
     * GoogleFontKit
-        * 폰트/Subset/Category 순서 변경
+        * DL에 API-KEY를 받도록 추가
+        * 성능 개선 시도