@ui5/webcomponents-tools 0.0.0-ec448881d → 0.0.0-ee3bbe46b

package/lib/documentation/index.js

@@ -1,168 +0,0 @@
-const cssVariables = {};
-const template = require('./templates/template').template;
-const sinceTemplate = require('./templates/api-component-since').template;
-const propertiesTemplate = require('./templates/api-properties-section').template;
-const slotsTemplate = require('./templates/api-slots-section').template;
-const eventsTemplate = require('./templates/api-events-section').template;
-const methodsTemplate = require('./templates/api-methods-section').template;
-const cssVariablesTemplate = require('./templates/api-css-variables-section').template;
-const Handlebars = require('handlebars/dist/handlebars.min.js');
-const fs = require('fs').promises;
-const path = require('path');
-const beautify = require("json-beautify");
-
-const generate = async () => {
-
-	const apiJSONPath = path.normalize(process.argv[2]);
-	const api = JSON.parse(await fs.readFile(apiJSONPath));
-
-	await fs.writeFile(apiJSONPath, beautify(api, null, 2, 100));
-
-	const entries = api['symbols'];
-	const compiledHandlebars = Handlebars.compile(template);
-	const compiledSinceTemplate = Handlebars.compile(sinceTemplate);
-	const linkMatcher = /{@link(\s)(\w+)\s*}/gi;
-	const sinceMarker = "<!--since_tag_marker-->";
-
-	const getComponentByName = name => {
-		return entries.find(element => {
-			return element.basename === name;
-		})
-	};
-
-	const getCSSVarsByName = name => {
-		return cssVariables[name] || [];
-	};
-
-	const capitalize = str => {
-		return str.replace(/^./, str => str.toUpperCase());
-	};
-
-	Handlebars.registerHelper('toLowerCase', function (str) {
-		return str ? str.toLowerCase() : "";
-	});
-
-	Handlebars.registerHelper('toKebabCase', function (str) {
-		const kebab = str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-		return kebab !== str ? kebab : undefined;
-	});
-
-	Handlebars.registerHelper('checkEven', function (iIndex) {
-		return (iIndex % 2 === 0) ? "api-table-roll-even" : "api-table-roll-odd";
-	});
-
-	Handlebars.registerPartial('properties', propertiesTemplate);
-	Handlebars.registerPartial('slots', slotsTemplate);
-	Handlebars.registerPartial('events', eventsTemplate);
-	Handlebars.registerPartial('methods', methodsTemplate);
-	Handlebars.registerPartial('cssVariables', cssVariablesTemplate);
-
-	await fs.mkdir(`dist/test-resources/api`, { recursive: true });
-
-	let entriesAPI = [];
-
-	const appendCSSVarsAPI = entry => {
-		entry.cssVariables = getCSSVarsByName(entry.basename);
-		return entry;
-	}
-
-	const componentHasEntityItem = (component, entity, name) => {
-		return component[entity].some(x => x && x.name === name);
-	};
-	const removeEmpty = arr => arr.filter(x => x);
-
-	const calculateAPI = component => {
-		if (entriesAPI.indexOf(component.basename) !== -1) {
-			return component;
-		}
-		const entities = ["properties", "slots", "events", "methods", "cssVariables"];
-
-		// Initialize all entities with [] if necessary, and remove undefined things, and only leave public things
-		entities.forEach(entity => {
-			component[entity] = removeEmpty(component[entity] || []).filter(x => x.visibility === "public");
-		});
-
-		component = appendCSSVarsAPI(component);
-
-		let parent = getComponentByName(component.extends);
-		if (parent) {
-			let parentComponent = calculateAPI(parent);
-			entities.forEach(entity => {
-				parentComponent[entity].forEach(x => {
-					if (!componentHasEntityItem(component, entity, x.name)) {
-						component[entity].push(x);
-					}
-				});
-			});
-		}
-
-		entriesAPI.push(component.basename);
-
-		return component;
-	};
-
-	const appendAdditionalEntriesAPI = entry => {
-		if (entry.appenddocs) {
-			const additionalEntries = entry.appenddocs.split(" ");
-			entry.additionalDocs = [];
-
-			additionalEntries.forEach(entryName => {
-				let additionalEntry = getComponentByName(entryName);
-				additionalEntry = calculateAPI(additionalEntry);
-				entry.additionalDocs.push(additionalEntry);
-			});
-		}
-
-		return entry;
-	}
-
-	const generateSamplePage = async entry => {
-		let content = "";
-
-		try {
-			content = await fs.readFile(`dist/test-resources/samples/${capitalize(entry.basename)}.sample.html`, 'utf8');
-		} catch (err) {
-		}
-
-		if (content) {
-			entry.slots.forEach(slotData => {
-				if (!slotData.type.startsWith("Node") && !slotData.type.startsWith("HTMLElement")) { // interface -> don't show in documentation
-					slotData.type = "HTMLElement" + (slotData.type.endsWith("[]") ? "[]" : "");
-				}
-			});
-			const APIReference = compiledHandlebars(entry).replace(/\[\]/g, " [0..n]");
-			const EntitySince = compiledSinceTemplate(entry).replace(/\[\]/g, " [0..n]");
-
-			content = content.replace('<!-- JSDoc marker -->', APIReference);
-			content = content.replace(sinceMarker, EntitySince);
-
-			content = content.replace(linkMatcher, match => {
-				const component = linkMatcher.exec(match)[2];
-
-				// reset the regex
-				linkMatcher.lastIndex = 0;
-
-				return `<a href="#" onclick="redirect(event, '${component}')">${component}</a>`;
-			});
-
-			return fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content);
-		}
-	}
-
-	const generateComponentAPI = entry => {
-		// (1) calculate the API
-		entry = calculateAPI(entry);
-
-		// (2) append additional API for composition components - List -> ListIems, TabContainer -> Tabs, Table -> TableRow/Column/Cell
-		entry = appendAdditionalEntriesAPI(entry);
-
-		// (3) generate sample page
-		return generateSamplePage(entry);
-	}
-
-	return Promise.all(entries.map(generateComponentAPI));
-};
-
-generate().then(() => {
-	console.log("Documentation generated.");
-});

package/lib/documentation/templates/api-component-since.js

@@ -1,3 +0,0 @@
-module.exports = {
-	template: `{{#if this.since}}v{{this.since}}{{/if}}`
-};

package/lib/documentation/templates/api-css-variables-section.js

@@ -1,24 +0,0 @@
-module.exports = {
-    template: `
-      {{#if cssVariables}}
-        <h3 class="comment-api-title" >CSS variables</h3>
-        <p class="small-space-top">You can use the following CSS varialbes to change the component styling.</p>
-  
-        <div class="small-space-top api-table">
-          <div class="head api-table-header-roll">
-            <div class="cell api-table-header-cell">Name</div>
-            <div class="cell api-table-header-cell">Description</div>
-          </div>
-  
-          {{#each cssVariables}}
-            <div class="row {{checkEven @index}}">
-              <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-              <div class="cell api-table-content-cell api-table-content-cell-description">
-                  {{{this.description}}}
-              </div>
-            </div>
-          {{/each}}
-  
-        </div>
-      {{/if}}`
-};

package/lib/documentation/templates/api-events-section.js

@@ -1,35 +0,0 @@
-module.exports = {
-  template: `
-    {{#if events}}
-      <h3 class="comment-api-title space-top">Events</h3>
-      <p class="small-space-top" >This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as <code>addEventListener</code>. </p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each events}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-            {{{this.description}}}
-            {{#if this.since}}
-                <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-            {{/if}}
-            </div>
-          </div>
-
-          {{#each this.parameters}}
-            <tr class="api-table-event-param">
-              <div class="api-table-content-event-params-wrapper">
-                <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-              </div>
-            </tr>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-methods-section.js

@@ -1,26 +0,0 @@
-module.exports = {
-  template: `
-    {{#if methods}}
-      <h3 class="comment-api-title space-top">Methods</h3>
-      <p class="small-space-top" >This Web Component exposes public methods. You can invoke them directly on the Web Component instance.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each methods}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-          </div>
-
-          {{#each this.parameters}}
-            <div class="cell api-table-content-cell api-table-content-cell-bold api-table-param-name">{{this.name}}</div>
-            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} <br/> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
-          {{/each}}
-        {{/each}}
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-properties-section.js

@@ -1,42 +0,0 @@
-module.exports = {
-  template: `
-    {{#if properties}}
-      <h3 class="comment-api-title" >Properties/Attributes</h3>
-      <p class="small-space-top" >You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.</p>
-
-      <div class="small-space-top api-table">
-        <div class="head api-table-header-roll">
-          <div class="cell api-table-header-cell">Name</div>
-          <div class="cell api-table-header-cell">Type</div>
-          <div class="cell api-table-header-cell">Default Value</div>
-          <div class="cell api-table-header-cell">Description</div>
-        </div>
-
-        {{#each properties}}
-          <div class="row {{checkEven @index}}">
-            <div class="cell api-table-content-cell api-table-content-cell-bold">
-              {{this.name}}
-              {{#if this.readonly}}
-                (readonly)
-              {{/if}}
-                <br>
-              {{#if (toKebabCase this.name)}}
-                  {{#unless this.noattribute}}
-                     <code>{{toKebabCase this.name}}</code>
-                 {{/unless}}
-              {{/if}}
-            </div>
-            <div class="cell api-table-content-cell">{{this.type}}</div>
-            <div class="cell api-table-content-cell">{{this.defaultValue}}</div>
-            <div class="cell api-table-content-cell api-table-content-cell-description">
-                {{{this.description}}}
-                {{#if this.since}}
-                    <div class="api-table-content-cell-bold api-table-content-cell-since">since v{{{this.since}}}</div>
-                {{/if}}
-            </div>
-          </div>
-        {{/each}}
-
-      </div>
-    {{/if}}`
-};

package/lib/documentation/templates/api-slots-section.js

@@ -1,28 +0,0 @@
-module.exports = {
-  template: `
-  {{#if slots}}
-    <h3 class="comment-api-title space-top" >Slots</h3>
-	<p class="small-space-top" >
-	  This Element provides slot(s). This means it can display its child nodes.<br>
-	  Unless targeting the default slot, use the <code>slot</code> attribute to define the destination slot for each child.<br>
-	  Text, along with HTML Elements with no <code>slot</code> attribute, goes the the <code>default</code> slot.
-	</p>
-
-    <div class="small-space-top api-table">
-      <div class="head api-table-header-roll">
-        <div class="cell api-table-header-cell">Slot</div>
-        <div class="cell api-table-header-cell">Type</div>
-        <div class="cell api-table-header-cell">Description</div>
-      </div>
-
-      {{#each slots}}
-        <div class="row {{checkEven @index}}">
-          <div class="cell api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-          <div class="cell api-table-content-cell">{{this.type}}</div>
-          <div class="cell api-table-content-cell api-table-content-cell-description">{{{this.description}}}</div>
-        </div>
-      {{/each}}
-
-    </div>
-  {{/if}}`
-};

package/lib/documentation/templates/template.js

@@ -1,39 +0,0 @@
-module.exports = {
-  template: `
-    <div class="page-container">
-      <div class="api-container">
-        <section class="component-description">
-          {{{description}}}
-          <section class="component-api space-top">
-            {{> properties this}}
-            {{> slots this}}
-            {{> events this}}
-            {{> methods this}}
-            {{> cssVariables this}} 
-          </section>
-        </section>
-      </div>
-    </div>
-    {{#each additionalDocs}}
-      <div class="api-container appended-doc">
-        <h1>{{this.basename}}</h1>
-        <section class="component-description">
-          {{{this.description}}}
-          <section class="component-api space-top">
-            {{> properties this}}
-            {{> slots this}}
-            {{> events this}}
-            {{> methods this}}
-            {{> cssVariables this}} 
-          </section>
-        </section>
-      </div>
-    {{/each}}
-    <footer class="footer-wrapper">
-      <div class="footer-links">
-        <a class="separator" href="https://www.sap.com/about/legal/privacy.html" target="_blank">Privacy Policy</a>
-        <a href="https://www.sap.com/about/legal/impressum.html" target="_blank">Legal</a>
-      </div>
-      <img src="../../../assets/images/sap-logo-svg.svg" alt="Sap Logo" />
-    </footer>`
-};

package/lib/serve/index.js

@@ -1,46 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const commandLineArgs = require("command-line-args");
-const { exec } = require("child_process");
-const colors = require("cli-color");
-const isPortReachable = require("is-port-reachable");
-
-const options = commandLineArgs([
-	{ name: "port", type: Number },
-	{ name: "portStep", type: Number },
-	{ name: "packageName", type: String },
-	{ name: "dir", type: String },
-	{ name: "config", type: String },
-]);
-const serveConfig = path.join(__dirname, `serve.json`);
-
-const requestPort = async () => {
-	const serveProcess = (await gen.next()).value;
-	serveProcess.stdout.on('data', data => {
-		const matches = data.match(/Accepting connections at .*?:(\d+)/);
-		if (matches) {
-			console.log(colors.yellow(`Reserved port ${matches[1]} for the ${options.packageName} package.`));
-			fs.writeFileSync(".port", matches[1]);
-		}
-	});
-};
-
-async function* serverGenerator(callback, port = 8080, step = 1) {
-	while (true) {
-		const portInUse = await isPortReachable(port, { host: "127.0.0.1" });
-		if (!portInUse) {
-			const command = `serve --config "${serveConfig}" --no-port-switching --no-clipboard -l ${port} ${options.dir}`;
-			console.log(colors.yellow(`Executing: ${command}`));
-			const serveProcess = exec(command, (err) => {
-				console.log(colors.yellow(`Port ${port} already in use.`));
-				callback();
-			});
-			yield serveProcess;
-		}
-		port += step;
-	}
-}
-
-const gen = serverGenerator(requestPort, options.port, options.portStep);
-
-requestPort();

package/lib/serve/serve.json

@@ -1,3 +0,0 @@
-{
-  "cleanUrls": false
-}

package/package-lock.json

@@ -1,48 +0,0 @@
-{
-  "name": "@ui5/webcomponents-tools",
-  "version": "1.0.0-rc.8",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
-      "dev": true,
-      "requires": {
-        "minimatch": "3.0.4"
-      }
-    }
-  }
-}