You can find examples of components in many of the repositories managed by tilepieces, in particular we recommend that you look at the main project and the repository with sample components.
Components fall into two categories: local and global.
To be used within a project, they must be imported as local components.
This can be done using the upload button inside the local components tab in the package manager panel, imported from the global components tab using the + button, or written directly in the project.
A project can be declared as a component by going to the component properties tab and pressing the Create button (it will thus become a global component).
The properties of a component are written in the file "tilepieces.component.json" present in the path associated with it.
In the application UI, these properties are divided into two: "metadata" and "properties".
While the former describe the component, the latter are those used to insert the component inside a HTML file and how to export it.
Below is a list of properties that can be associated with it:Name
The name of the component.
Description
The description of the component.
version
The version of the component.
author
The author of the component.
website
The website of the component.
repository
Where is the source code contained.
html
It is the path of the file that contains the HTML code that will be inserted into the document. The path is relative to the folder where the "tilepieces.component.json" file is contained. This file will be included when you import or export the component.
When Tilepieces inserts this file into a document via the component panel, it imports only the contents of the body (it expects the file to be HTML) and deletes the LINK and SCRIPT tags it finds inside it.
When Tilepieces inserts this file into a document via the component panel, it imports only the contents of the body (it expects the file to be HTML) and deletes the LINK and SCRIPT tags it finds inside it.
SCRIPT tags with an invalid type attribute (such as type = "application / json") are imported.
addDependenciesToBundles
It is a boolean value that indicates to add dependency files when concatenating or minifying the css and javascript bundles.
When this value is true, dependencies css and js files will not be imported into the current document.
bundle
It's a JSON object where the CSS and Javascript files of the component are indicated.
File paths indicated here will be included when you import or export the component.
A component can import only one CSS resource and only one Javascript resource. If you want to use multiple files, you can: concatenate sources (you can do this from the package manager) or use multiple components or subcomponents.You can also use techniques like @import for css and import for javascript. In this case, remember to report the resources used in the miscellaneous files.
Keys are the following:
File paths indicated here will be included when you import or export the component.
A component can import only one CSS resource and only one Javascript resource. If you want to use multiple files, you can: concatenate sources (you can do this from the package manager) or use multiple components or subcomponents.You can also use techniques like @import for css and import for javascript. In this case, remember to report the resources used in the miscellaneous files.
Keys are the following:
stylesheet
It is a JSON object made up of attribute - value pairs that represent the attributes of a link tag.
The path is relative to the folder where the "tilepieces.component.json" file is contained.
The attribute "rel" is always overidden with "stylesheet".
JSON Example:
The path is relative to the folder where the "tilepieces.component.json" file is contained.
The attribute "rel" is always overidden with "stylesheet".
JSON Example:
{
"href": "print.css",
"media" : "print",
"title" : "this is a stylesheet for print"
}script
It is a JSON object made up of attribute - value pairs that represent the attributes of a script tag.
The path is relative to the folder where the "tilepieces.component.json" file is contained.
JSON Example:
The path is relative to the folder where the "tilepieces.component.json" file is contained.
JSON Example:
{
"src": "js.mjs",
"type" : "module",
"title" : "this is a module javascript"
}stylesheetHeader
String to add to the beginning of the bundle file when the css files are concatenated.
stylesheetFooter
String to add to the end of the bundle file when the css files are concatenated.
scriptHeader
String to add to the beginning of the bundle file when the javascript are concatenated or minified.
scriptFooter
String to add to the end of the bundle file when the javascript files are concatenated.
sources
It's a Javascript object where the source files of the javascript and CSS bundles are indicated.
Keys are the following:
Keys are the following:
stylesheets
It's an array of file paths.
These paths can also point to directories (all contained files will be returned) or they can be globs.
scripts
It's an array of file paths.
These paths can also point to directories (all contained files will be returned) or they can be globs.
terser configuration
It is an object that represents the minify options of the terser library.
By default, this is set to
The paths are relative to the position of the component.
By default, this is set to
{compress: false, mangle: false}The paths are relative to the position of the component.
{
sourceMap: {
filename: "out.js",
url: "out.map"
}
}dependencies
It is an array with component names.
When you import a component from the global components tab they will be imported as well. If the component name is not present in the global components, an error popup will be shown.
When inserting a component into a document, if one of them is not present in the local components of the project, an error popup will be shown.
A subcomponent must enter the name of its parent component if it wants to import its files.
When inserting a component into a document, if one of them is not present in the local components of the project, an error popup will be shown.
A subcomponent must enter the name of its parent component if it wants to import its files.
components
Object that describes the subcomponents. Paths are relative to the folder where the "tilepieces.component.json" file is contained.
Example:
Example:
"components": {
"tilepieces/component-panel/bundle": {
"name": "tilepieces/component-panel/bundle",
"path": "/bundle"
}
}miscellaneous
It's an array of file paths. These files will be included when you import or export the component.
These paths can also point to directories (all contained files will be returned) or they can be globs.
mergeMiscellaneous
The "miscellaneous" files will be copied not inside the component path, but in the project root.
selector
It is a string representing a CSS selector which can be used to associate an interface to an element.
By default, this will be "[data-tilepieces-component=${component.name}]"
By default, this will be "[data-tilepieces-component=${component.name}]"
interface
It is a path of an HTML file that will be displayed in the element panel in the associated interfaces tab when a node is selected that match the selector.
fixedHTML
It is a Boolean value that indicates whether the HTML associated with the component is of type "fixed".
The "fixed" HTML are inserted at the end of the body, while the non "fixed" ones are inserted according to the "insertion mode" field. Read more about inserting component with tilepieces.
The "fixed" HTML are inserted at the end of the body, while the non "fixed" ones are inserted according to the "insertion mode" field. Read more about inserting component with tilepieces.
parseHTML
It is a string that specifies a path of a javascript file that transforms the HTML file associated with the component before being inserted.
The example below shows how to edit an html file that has patterns
The example below shows how to edit an html file that has patterns
<div id={id}>...</div>// global HTMLText : String of the HTML file// global tilepieces : tilepieces object
function parseWrapper() {
const mainname = "bootstrap-dropdown";
var doc = tilepieces.core.currentDocument;
var count = 0;
var id = mainname;
while (doc.getElementById(id))
id = mainname + "-" + count++;
let data = {
id
};
return HTMLText.replace(new RegExp(/\{([\s\S]+?)\}/, "g"), (match, variable)=> data[variable])
}