@ui5/webcomponents-tools 0.0.0-cc312800a → 0.0.0-cf50976ce

package/lib/documentation/index.js

@@ -1,165 +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');
-const path = require('path');
-const mkdirp = require('mkdirp');
-const beautify = require("json-beautify");
-
-
-const apiJSONPath = path.normalize(process.argv[2]);
-const api = JSON.parse(fs.readFileSync(apiJSONPath));
-
-fs.writeFileSync(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);
-
-mkdirp.sync(`dist/test-resources/api`);
-
-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 = entry => {
-	let content = "";
-
-	try {
-		content = fs.readFileSync(`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>`;
-		});
-
-		fs.writeFile(`dist/test-resources/api/${entry.basename}.sample.html`, content, (err) => {
-			// console.log(err);
-		});
-	}
-}
-
-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
-	generateSamplePage(entry);
-}
-
-entries.forEach(generateComponentAPI);
-entriesAPI = [];

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,40 +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)}}
-                <code>{{toKebabCase this.name}}</code>
-              {{/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,38 +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}}
-            {{> 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/hash/config.js

@@ -1,10 +0,0 @@
-const config = {
-	files: {
-		exclude: ['serve.json']
-	},
-	folders: {
-		exclude: ['resources']
-	},
-};
-
-module.exports = config;

package/lib/hash/generate.js

@@ -1,19 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const process = require("process");
-const { hashElement } = require("folder-hash");
-const config = require("./config.js");
-
-const inputDir = path.normalize(process.argv[2]);
-const outputFileName = path.normalize(process.argv[3]);
-
-const generateHash = async (inputDir, outputFileName) => {
-	const result = await hashElement(inputDir, config);
-	const hash = result.hash;
-	fs.writeFileSync(outputFileName, hash);
-	return hash;
-};
-
-generateHash(inputDir, outputFileName).then(hash => {
-	console.log(`Generated hash: ${hash}`);
-});

package/lib/hash/upToDate.js

@@ -1,31 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const process = require("process");
-const { hashElement } = require("folder-hash");
-const config = require("./config.js");
-
-const inputDir = path.normalize(process.argv[2]);
-const hashFileName = path.normalize(process.argv[3]);
-
-const isUpToDate = async (inputDir, hashFileName) => {
-	// No dist/ directory or no hash file
-	if (!fs.existsSync(inputDir) || !fs.existsSync(hashFileName)) {
-		return false;
-	}
-
-	// Empty hash file
-	const existingHash = `${fs.readFileSync(hashFileName)}`;
-	if (!existingHash) {
-		return false;
-	}
-
-	// Calculate the hash of the dist/ directory
-	const result = await hashElement(inputDir, config);
-	const newHash = result.hash;
-
-	return newHash === existingHash;
-};
-
-isUpToDate(inputDir, hashFileName).then(upToDate => {
-	process.exit(upToDate ? 0 : 1); // 0 means success (it is up to date), 1 means failure (must rebuild the dist/)
-});

package/lib/init-package/index.js

@@ -1,123 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const mkdirp = require("mkdirp");
-const commandLineArgs = require('command-line-args');
-const beautify = require("json-beautify");
-
-// String utils
-const kebabToCamelCase = string => toCamelCase(string.split("-"));
-const toCamelCase = parts => {
-	return parts.map((string, index) => {
-		return index === 0 ? string.toLowerCase() : string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-	}).join("");
-};
-const capitalizeFirst = str => str.substr(0,1).toUpperCase() + str.substr(1);
-
-// content of package.json
-let packageContent;
-
-const DEFAULT_PORT = 8080;
-const DEFAULT_TAG = 'my-first-component';
-
-// from where all the files will be copied
-const RESOURCES_DIR = path.join(`${__dirname}`, `resources/`);
-
-// Command line options
-const options = commandLineArgs([
-	{name: 'port', alias: 'p', type: Number},
-	{name: 'tag', type: String},
-]);
-
-// Ensure there is package.json
-try {
-	packageContent = JSON.parse(fs.readFileSync("package.json"));
-} catch (err) {
-	console.log("No package.json found, please run: 'npm init' first");
-	process.exit(1);
-}
-
-// Ensure correct tag
-const tag = options.tag || DEFAULT_TAG;
-if (!tag.includes("-")) {
-	console.log("tag name should contain at least one dash");
-	process.exit(1);
-}
-if (tag.startsWith("ui5-")) {
-	console.log("The ui5- prefix is reserved for the standard UI5 Web Components due to future possible name clashes.");
-	process.exit(1);
-}
-
-const className = capitalizeFirst(kebabToCamelCase(tag));
-
-// All variables that will be replaced in the content of the resources/
-const vars = {
-	INIT_PACKAGE_VAR_NAME: packageContent.name,
-	INIT_PACKAGE_VAR_PORT: options.port || DEFAULT_PORT,
-	INIT_PACKAGE_VAR_TAG: tag,
-	INIT_PACKAGE_VAR_CLASS_NAME: className,
-};
-console.log(vars);
-
-const replaceVarsInFileContent = content => {
-	for (let key in vars) {
-		const re = new RegExp(key, "g");
-		content = content.replace(re, vars[key]);
-	}
-	return content;
-};
-
-const replaceVarsInFileName = fileName => {
-	return fileName.replace(/MyFirstComponent/, vars.INIT_PACKAGE_VAR_CLASS_NAME)	;
-};
-
-const copyFile = (sourcePath, destPath) => {
-	let content = fs.readFileSync(sourcePath, {encoding: "UTF-8"});
-	content = replaceVarsInFileContent(content);
-	destPath = replaceVarsInFileName(destPath);
-	fs.writeFileSync(destPath, content);
-	console.log(destPath);
-};
-
-const copyResources = sourcePath => {
-	const destPath = sourcePath.substr(RESOURCES_DIR.length);
-	const isDir = fs.lstatSync(sourcePath).isDirectory();
-	if (isDir) {
-		if (destPath) {
-			mkdirp.sync(destPath);
-			console.log(destPath);
-		}
-		fs.readdirSync(sourcePath).forEach(file => {
-			copyResources(path.join(sourcePath, file));
-		});
-	} else {
-		copyFile(sourcePath, destPath);
-	}
-};
-
-const updatePackageFile = () => {
-	packageContent.scripts = {
-		"clean": "wc-dev clean",
-		"lint": "wc-dev lint",
-		"start": "wc-dev start",
-		"watch": "wc-dev watch",
-		"serve": "wc-dev serve",
-		"build": "wc-dev build",
-		"test": "wc-dev test",
-		"create-ui5-element": "wc-create-ui5-element",
-		"prepublishOnly": "npm run build"
-	};
-
-	packageContent.ui5 = {
-		webComponentsPackage: true
-	};
-
-	fs.writeFileSync("package.json", beautify(packageContent, null, 2, 100));
-};
-
-// Copy files
-copyResources(RESOURCES_DIR);
-
-// Update package.json
-updatePackageFile();
-
-console.log("Package successfully initialized.");

package/lib/init-package/resources/.eslintignore

@@ -1,3 +0,0 @@
-# Note: Changes to this file also must be applied to the top level .eslintignore file.
-dist
-test

package/lib/init-package/resources/bundle.es5.js

@@ -1,25 +0,0 @@
-// ES5 bundle targets IE11 only
-import "@ui5/webcomponents-ie11/dist/features/IE11.js";
-
-import "./bundle.esm.js";
-
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-
-const configuration = {
-	getAnimationMode,
-	getLanguage,
-	getTheme,
-	setTheme,
-	getNoConflict,
-	setNoConflict,
-	getCalendarType,
-	getRTL,
-	getFirstDayOfWeek,
-};
-export default configuration;

package/lib/init-package/resources/bundle.esm.js

@@ -1,31 +0,0 @@
-// used in test pages
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-
-// Enable additional themes and i18n texts
-import "./dist/Assets.js";
-
-// Import your web components here from the dist/ directory
-import "./dist/INIT_PACKAGE_VAR_CLASS_NAME.js";
-
-window["sap-ui-webcomponents-bundle"] = {
-	renderFinished,
-	configuration: {
-		getAnimationMode,
-		getLanguage,
-		getTheme,
-		setTheme,
-		getNoConflict,
-		setNoConflict,
-		getCalendarType,
-		getRTL,
-		getFirstDayOfWeek,
-	},
-};

package/lib/init-package/resources/config/.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/eslint.js");

package/lib/init-package/resources/config/postcss.components/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.components.js");

package/lib/init-package/resources/config/postcss.themes/postcss.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/postcss.themes.js");

package/lib/init-package/resources/config/rollup.config.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/rollup.js");

package/lib/init-package/resources/config/wdio.conf.js

@@ -1 +0,0 @@
-module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js");

package/lib/init-package/resources/package-scripts.js

@@ -1,11 +0,0 @@
-const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js");
-
-const options = {
-	port: INIT_PACKAGE_VAR_PORT,
-};
-
-const scripts = getScripts(options);
-
-module.exports = {
-	scripts,
-};

package/lib/init-package/resources/src/Assets.js

@@ -1,5 +0,0 @@
-import "@ui5/webcomponents-theme-base/dist/Assets.js"; // Theming
-
-// own INIT_PACKAGE_VAR_NAME package assets
-import "./generated/json-imports/Themes.js";
-import "./generated/json-imports/i18n.js";

package/lib/init-package/resources/src/MyFirstComponent.hbs

@@ -1 +0,0 @@
-<div>This is: INIT_PACKAGE_VAR_TAG. {{pleaseWaitText}}</div>