@datawrapper/svelte-component-info 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Samuele de Tomasi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# Svelte - Get Component Info
+
+_A function to extract information about the props, actions, slots and css variables from a Svelte file. Designed to simplify the creation of documentation_
+
+NPM link: [@el3um4s/svelte-get-component-info](https://www.npmjs.com/package/@el3um4s/svelte-get-component-info)
+
+I recommend using it with [el3um4s/svelte-component-info](https://github.com/el3um4s/svelte-component-info) (npm: [@el3um4s/svelte-component-info](https://www.npmjs.com/package/@el3um4s/svelte-component-info))
+
+### Install and use the package
+
+To use the package in a project:
+
+```bash
+npm i @el3um4s/svelte-get-component-info
+```
+
+and then in a file:
+
+```ts
+import type { SvelteInformations } from "@el3um4s/svelte-get-component-info";
+import { getInfo, readFileSvelte } from "@el3um4s/svelte-get-component-info";
+
+const info: SvelteInformations = getInfo(readFileSvelte("./src/lib/hello.svelte").content.content);
+console.log(info.props); //  [{ name: "message", type: "string", defaultValue: "Hello World" }]
+console.log(info.actions); /// [ { name: "notify" }]
+```
+
+`info` looks like this:
+
+```json
+{
+    "props": [
+        { "name": "color", "type":"string", "defaultValue":"red" },
+        { "name": "steps", "type":"number", "defaultValue":"8" }
+        { "name": "title", "type":"string" },
+        { "name": "description"}
+    ],
+    "actions": [
+        { "name": "click" },
+        { "name": "hover" },
+        { "name": "customAction" }
+    ],
+    "slots": [
+        { "anonymous": true },
+        { "name": "header", "anonymous": false },
+        { "name": "footer", "anonymous": false }
+    ],
+    "css": [
+      { "name": "--color-primary" },
+      { "name": "--color-secondary" }
+    ]
+}
+```
+
+### To Do List:
+
+- [x] get props:
+  - [x] name
+  - [x] type
+  - [x] defaultValue
+- [x] actions
+- [x] slots
+  - [x] anonyms
+  - [x] named
+- [x] css variables

package/lib/functions/getInfo.d.ts

@@ -0,0 +1,3 @@
+import { SvelteInformations } from "./interfaces";
+declare function getInfo(source: string): SvelteInformations;
+export { getInfo };

package/lib/functions/getInfo.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInfo = void 0;
+const parseFileSvelte_1 = require("./parseFileSvelte");
+const parseProps_1 = require("./parseProps");
+const parseActions_1 = require("./parseActions");
+const parseSlots_1 = require("./parseSlots");
+const parseCSS_1 = require("./parseCSS");
+function getInfo(source) {
+    const propsAsInFile = (0, parseFileSvelte_1.getProps_asInFile)(source);
+    const props = [];
+    propsAsInFile.forEach(p => props.push((0, parseProps_1.getPropInfo)(p)));
+    const actionsAsInFile = (0, parseFileSvelte_1.getActions_asInFile)(source);
+    const actionsWithDuplicates = [];
+    actionsAsInFile.forEach(a => actionsWithDuplicates.push((0, parseActions_1.getActionInfo)(a)));
+    const act = new Set();
+    const actions = actionsWithDuplicates.filter(el => {
+        const duplicate = act.has(el.name);
+        act.add(el.name);
+        return !duplicate;
+    });
+    const slotsInFile = (0, parseFileSvelte_1.getSlots_asInFile)(source);
+    const slotsWithDuplicates = [];
+    slotsInFile.forEach(s => slotsWithDuplicates.push((0, parseSlots_1.getSlotInfo)(s)));
+    const slot = new Set();
+    const slots = slotsWithDuplicates.filter(el => {
+        const duplicate = slot.has(el.name);
+        slot.add(el.name);
+        return !duplicate;
+    });
+    const cssInFile = (0, parseFileSvelte_1.getCSS_asInFile)(source);
+    const cssWithDuplicates = [];
+    cssInFile.forEach(s => cssWithDuplicates.push((0, parseCSS_1.getCSSInfo)(s)));
+    const c = new Set();
+    const css = cssWithDuplicates.filter(el => {
+        const duplicate = c.has(el.name);
+        c.add(el.name);
+        return !duplicate;
+    });
+    return { props, actions, slots, css };
+}
+exports.getInfo = getInfo;

package/lib/functions/interfaces.d.ts

@@ -0,0 +1,29 @@
+export interface Content {
+    error: Reading;
+    content: Reading;
+}
+export interface Reading {
+    status: boolean;
+    content: string;
+}
+export interface Prop {
+    name: string;
+    type?: string;
+    defaultValue?: string;
+}
+export interface Action {
+    name: string;
+}
+export interface Slot {
+    anonymous: boolean;
+    name?: string;
+}
+export interface CSS {
+    name: string;
+}
+export interface SvelteInformations {
+    props: Array<Prop>;
+    actions: Array<Action>;
+    slots: Array<Slot>;
+    css: Array<CSS>;
+}

package/lib/functions/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/functions/parseActions.d.ts

@@ -0,0 +1,4 @@
+import type { Action } from "./interfaces";
+declare function getActionInfo(s: string): Action;
+declare function getActionName(s: string): string;
+export { getActionInfo, getActionName };

package/lib/functions/parseActions.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getActionName = exports.getActionInfo = void 0;
+function getActionInfo(s) {
+    const name = getActionName(s);
+    return { name };
+}
+exports.getActionInfo = getActionInfo;
+function getActionName(s) {
+    const action = s.trim().substring(1).trim();
+    const name = action.substring(0, action.length - 1);
+    return name;
+}
+exports.getActionName = getActionName;

package/lib/functions/parseCSS.d.ts

@@ -0,0 +1,4 @@
+import type { CSS } from "./interfaces";
+declare function getCSSInfo(s: string): CSS;
+declare function getCSSName(s: string): string;
+export { getCSSInfo, getCSSName };

package/lib/functions/parseCSS.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCSSName = exports.getCSSInfo = void 0;
+function getCSSInfo(s) {
+    const name = getCSSName(s);
+    return { name };
+}
+exports.getCSSInfo = getCSSInfo;
+function getCSSName(s) {
+    return s.trim();
+}
+exports.getCSSName = getCSSName;

package/lib/functions/parseFileSvelte.d.ts

@@ -0,0 +1,9 @@
+declare function hasProps(component: string): boolean;
+declare function getProps_asInFile(component: string): Array<string>;
+declare function hasActions(component: string): boolean;
+declare function getActions_asInFile(component: string): Array<string>;
+declare function hasSlots(component: string): boolean;
+declare function getSlots_asInFile(component: string): Array<string>;
+declare function hasCSS(component: string): boolean;
+declare function getCSS_asInFile(component: string): Array<string>;
+export { hasProps, getProps_asInFile, hasActions, getActions_asInFile, hasSlots, getSlots_asInFile, hasCSS, getCSS_asInFile };

package/lib/functions/parseFileSvelte.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCSS_asInFile = exports.hasCSS = exports.getSlots_asInFile = exports.hasSlots = exports.getActions_asInFile = exports.hasActions = exports.getProps_asInFile = exports.hasProps = void 0;
+const regex = {
+    propsGeneric: /export let [\s\S]*?;/gi,
+    actionsGeneric: /(?<=dispatch[.(])(.*?)(?=[,)])/gi,
+    slotsGeneric: /<slot[\s\S]*?>/gi,
+    cssGeneric: /(?=--)(.*?)(?=[,=)>:;\n\r\t\0])/gi
+};
+function hasProps(component) {
+    const content = component.match(regex.propsGeneric);
+    return content != null;
+}
+exports.hasProps = hasProps;
+function getProps_asInFile(component) {
+    const content = component.match(regex.propsGeneric);
+    return content != null ? content : [];
+}
+exports.getProps_asInFile = getProps_asInFile;
+function hasActions(component) {
+    const content = component.match(regex.actionsGeneric);
+    return content != null;
+}
+exports.hasActions = hasActions;
+function getActions_asInFile(component) {
+    const content = component.match(regex.actionsGeneric);
+    return content != null ? content : [];
+}
+exports.getActions_asInFile = getActions_asInFile;
+function hasSlots(component) {
+    const content = component.match(regex.slotsGeneric);
+    return content != null;
+}
+exports.hasSlots = hasSlots;
+function getSlots_asInFile(component) {
+    const content = component.match(regex.slotsGeneric);
+    return content != null ? content : [];
+}
+exports.getSlots_asInFile = getSlots_asInFile;
+function hasCSS(component) {
+    const content = component.match(regex.cssGeneric);
+    return content != null;
+}
+exports.hasCSS = hasCSS;
+function getCSS_asInFile(component) {
+    const content = component.match(regex.cssGeneric);
+    return content != null ? content : [];
+}
+exports.getCSS_asInFile = getCSS_asInFile;

package/lib/functions/parseProps.d.ts

@@ -0,0 +1,6 @@
+import type { Prop } from "./interfaces";
+declare function getPropInfo(s: string): Prop;
+declare function getPropName(s: string): string;
+declare function getPropType(s: string): string | undefined;
+declare function getPropDefaultValue(s: string): string | undefined;
+export { getPropInfo, getPropName, getPropType, getPropDefaultValue };

package/lib/functions/parseProps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPropDefaultValue = exports.getPropType = exports.getPropName = exports.getPropInfo = void 0;
+const utils_1 = require("./utils");
+const regex = {
+    name: /(?<=let )(.*?)(?=\s|;|=|:)/,
+    type: /(?<=let [:]|[:])(.*?)(?=;|=)/
+};
+function getPropInfo(s) {
+    const name = getPropName(s);
+    const type = getPropType(s);
+    const defaultValue = getPropDefaultValue(s);
+    return { name, type, defaultValue };
+}
+exports.getPropInfo = getPropInfo;
+function getPropName(s) {
+    const nameRegex = s.match(regex.name);
+    const nameWithDelimiters = nameRegex ? nameRegex[0] : "";
+    const name = nameWithDelimiters.replace("let", "").replace(/[:|;|=]/gi, "").trim();
+    return name;
+}
+exports.getPropName = getPropName;
+function getPropType(s) {
+    const typeRegex = s.match(regex.type);
+    const positionEquals = s.indexOf("=");
+    const positionSemicolon = s.indexOf(";");
+    const firstDelimiters = positionEquals > -1 ? positionEquals : positionSemicolon;
+    const positionRegex = (typeRegex === null || typeRegex === void 0 ? void 0 : typeRegex.index) ? typeRegex.index : -1;
+    const type = positionRegex < firstDelimiters && typeRegex ? typeRegex[0].trim() : undefined;
+    return type;
+}
+exports.getPropType = getPropType;
+function getPropDefaultValue(s) {
+    const positionEquals = s.indexOf("=");
+    const positionSemicolon = s.lastIndexOf(";");
+    const defaultValue = positionEquals < 0 ? undefined : s.substring(positionEquals + 1, positionSemicolon).trim();
+    const result = defaultValue && (0, utils_1.isStringType)(defaultValue) ? (0, utils_1.getStringWithoutQuote)(defaultValue) : defaultValue;
+    return result;
+}
+exports.getPropDefaultValue = getPropDefaultValue;

package/lib/functions/parseSlots.d.ts

@@ -0,0 +1,5 @@
+import type { Slot } from "./interfaces";
+declare function getSlotInfo(s: string): Slot;
+declare function getSlotName(s: string): string | undefined;
+declare function isSlotAnonymous(s: string): boolean;
+export { getSlotName, isSlotAnonymous, getSlotInfo };

package/lib/functions/parseSlots.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSlotInfo = exports.isSlotAnonymous = exports.getSlotName = void 0;
+const regex = {
+    slotName: /(?<=name\s*=)(.*)("|'|`)/gi
+};
+function getSlotInfo(s) {
+    const anonymous = isSlotAnonymous(s);
+    const name = getSlotName(s);
+    return { name, anonymous };
+}
+exports.getSlotInfo = getSlotInfo;
+function getSlotName(s) {
+    var _a;
+    const slot = (_a = s.match(regex.slotName)) === null || _a === void 0 ? void 0 : _a[0].trim();
+    const name = slot == null ? undefined : slot.substring(1, slot.length - 1);
+    return name;
+}
+exports.getSlotName = getSlotName;
+function isSlotAnonymous(s) {
+    const slot = s.match(regex.slotName);
+    return slot == null;
+}
+exports.isSlotAnonymous = isSlotAnonymous;

package/lib/functions/readFileSvelte.d.ts

@@ -0,0 +1,4 @@
+import { Content } from "./interfaces";
+declare function readFileSvelte(nameFile: string): Content;
+declare function checkFileExist(nameFile: string): boolean;
+export { readFileSvelte, checkFileExist };

package/lib/functions/readFileSvelte.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkFileExist = exports.readFileSvelte = void 0;
+const fs_1 = require("fs");
+const to_try_1 = require("@el3um4s/to-try");
+function readFileSvelte(nameFile) {
+    const content = {
+        error: {
+            status: true,
+            content: "file not read"
+        },
+        content: {
+            status: false,
+            content: ""
+        }
+    };
+    if (checkFileExist(nameFile)) {
+        const [result, error] = (0, to_try_1.toTry)(() => (0, fs_1.readFileSync)(nameFile));
+        if (!error && result) {
+            const contentString = result.toString();
+            content.error = {
+                status: false,
+                content: ""
+            };
+            content.content = {
+                status: true,
+                content: contentString
+            };
+        }
+    }
+    else {
+        content.error.content = `File "${nameFile}" not exist`;
+    }
+    return content;
+}
+exports.readFileSvelte = readFileSvelte;
+function checkFileExist(nameFile) {
+    return (0, fs_1.existsSync)(nameFile);
+}
+exports.checkFileExist = checkFileExist;

package/lib/functions/utils.d.ts

@@ -0,0 +1,3 @@
+declare function isStringType(s: string): boolean;
+declare function getStringWithoutQuote(s: string): string;
+export { isStringType, getStringWithoutQuote };

package/lib/functions/utils.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStringWithoutQuote = exports.isStringType = void 0;
+function isStringType(s) {
+    const startString = s.trim();
+    const firstChar = startString.charAt(0);
+    const lastChar = startString.charAt(startString.length - 1);
+    const charIsQuote = firstChar === `"` || firstChar === `'` || firstChar === "`";
+    const result = charIsQuote && firstChar === lastChar;
+    return result;
+}
+exports.isStringType = isStringType;
+function getStringWithoutQuote(s) {
+    const startString = s.trim();
+    const result = startString.substring(1, startString.length - 1);
+    return result;
+}
+exports.getStringWithoutQuote = getStringWithoutQuote;

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { getInfo } from "./functions/getInfo";
+import { readFileSvelte } from "./functions/readFileSvelte";
+import type { SvelteInformations } from "./functions/interfaces";
+export { getInfo, readFileSvelte, SvelteInformations };

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readFileSvelte = exports.getInfo = void 0;
+const getInfo_1 = require("./functions/getInfo");
+Object.defineProperty(exports, "getInfo", { enumerable: true, get: function () { return getInfo_1.getInfo; } });
+const readFileSvelte_1 = require("./functions/readFileSvelte");
+Object.defineProperty(exports, "readFileSvelte", { enumerable: true, get: function () { return readFileSvelte_1.readFileSvelte; } });

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@datawrapper/svelte-component-info",
+  "version": "0.1.0",
+  "description": "A library to read the component infos from Svelte source code",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint . --ext .ts",
+    "test": "jest --config jestconfig.json",
+    "test:no-coverage": "jest --config jestconfig.json --coverage=false",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "git add -A src",
+    "postversion": "git push && git push --tags",
+    "check-updates": "npx npm-check-updates",
+    "check-updates:minor": "npx npm-check-updates --target minor",
+    "check-updates:patch": "npx npm-check-updates --target patch",
+    "version:patch": "npm version patch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datawrapper/svelte-component-info.git"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "keywords": [
+    "typescript",
+    "npm",
+    "ts",
+    "svelte",
+    "documentation",
+    "autogenerator",
+    "sveltejs",
+    "sveltekit"
+  ],
+  "author": "Datawrapper GmbH (Original author: Samuele C. De Tomasi)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/el3um4s/svelte-get-component-info/issues"
+  },
+  "homepage": "https://github.com/el3um4s/svelte-get-component-info#readme",
+  "devDependencies": {
+    "@types/jest": "^27.0.3",
+    "@types/node": "^17.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.8.1",
+    "@typescript-eslint/parser": "^5.8.1",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "jest": "^27.4.5",
+    "ts-jest": "^27.1.2",
+    "typescript": "^4.5.4"
+  },
+  "dependencies": {
+    "@el3um4s/to-try": "^0.0.5"
+  }
+}