Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (73 sloc) 2.59 KB

ZephJS > Writing Components > Component Creation

Sections

Component Creation

The smallest ZephJS Component consist of a single .js file.

my-button.js

However, we recommend the practice of separating your JavaScript, HTML and CSS into separate files in the same directory with the same name. This is a more organized way to handle your components.

my-button.js
my-button.html
my-button.css

The Zeph Command Line Tool

To speed in your development and to encourage the practice of separating your components out, ZephJS provides a command line tool for creating a new component that gives you the very basic files you need.

zeph create <component-name> [filename]

This command takes one require argument and one optional argument:

  • component-name: The name you want to give the new component, that is the tag name it will be registered under. This name must contain a dash ("-") character.
  • filename: Optional filename to write the component out as. If not provided ZephJS will use the component-name as the filename.

So for example:

zeph create my-button

Would create the following files in the current directory:

my-button.js

 1:
 2:	/*
 3:	        Generated ZephS component: my-button
 4:
 5:	        ZephJS is copyright 2019, The Awesome Engineering Company
 6:	        and is released under the MIT licesne.
 7:	 */
 8:
 9:	import {ZephComponents,html,css} from "./zeph.min.js";
10:
11:	ZephComponents.define("my-button",()=>{
12:	        html("./my-button.html");
13:	        css("./my-button.css");
14:
15:	        // Place your compnent defintion calls here. See the ZephJS documentation for more information.
16:	});
17:

my-button.html

1:
2:	<!-- Place your ZephJS html code here. See the ZephJS documentation for more information. -->
3:

my-button.css

1:
2:	/* Place your ZephJS CSS code here. See the ZephJS documentation for more information. */
3:
You can’t perform that action at this time.