├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CODE-OF-CONDUCT.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── RELEASE_NOTES.md ├── benchmark ├── .eslintignore ├── .eslintrc.js ├── index.html ├── package.json ├── zeph-benchmark-row.js └── zeph-benchmark.js ├── bin ├── .eslintignore ├── .eslintrc.js └── zeph ├── docs ├── API.md ├── CLI.md ├── ComponentAssets.md ├── ComponentAttributes.md ├── ComponentBindings.md ├── ComponentBundling.md ├── ComponentConcepts.md ├── ComponentCreation.md ├── ComponentDefinition.md ├── ComponentEvents.md ├── ComponentImporting.md ├── ComponentInheritance.md ├── ComponentLifecycleHandlers.md ├── ComponentMarkup.md ├── ComponentProperties.md ├── ComponentQuickStart.md ├── ComponentStyling.md ├── FAQ.md ├── GetStartedApplication.md ├── GetStartedLibrary.md ├── GetStartedSite.md ├── GetStartedUsing.md ├── Introducing.md ├── Polyfill.md └── Services.md ├── examples ├── BasicComponent │ ├── .eslintignore │ ├── .eslintrc.js │ ├── awesome-hello.css │ ├── awesome-hello.html │ ├── awesome-hello.js │ ├── index.html │ └── package.json ├── ExampleCollection │ ├── .eslintignore │ ├── .eslintrc.js │ ├── example-components.js │ ├── index.html │ └── package.json ├── ExampleService │ ├── .eslintignore │ ├── .eslintrc.js │ ├── ClockService.js │ ├── example-clock.css │ ├── example-clock.html │ ├── example-clock.js │ ├── index.html │ └── package.json ├── HelloBadge │ ├── .eslintignore │ ├── .eslintrc.js │ ├── awesome-border-layout.css │ ├── awesome-border-layout.html │ ├── awesome-border-layout.js │ ├── awesome-hello-badge.css │ ├── awesome-hello-badge.html │ ├── awesome-hello-badge.js │ ├── index.html │ └── package.json ├── QuickStartExample │ ├── .eslintignore │ ├── .eslintrc.js │ ├── index.html │ ├── my-button.css │ ├── my-button.html │ ├── my-button.js │ ├── my-button.png │ └── package.json └── RatingStars │ ├── .eslintignore │ ├── .eslintrc.js │ ├── Glow.mp4 │ ├── debug.html │ ├── index.html │ ├── movie-player.css │ ├── movie-player.html │ ├── movie-player.js │ ├── movie-player.min.js │ ├── package.json │ ├── rating-stars.css │ ├── rating-stars.empty.png │ ├── rating-stars.filled.png │ ├── rating-stars.html │ ├── rating-stars.js │ └── rating-stars.min.js ├── jsdoc.json ├── logos ├── TwitterFollowZephJS.png ├── ZephJS.128x128.transparent.png ├── ZephJS.128x128.white.png ├── ZephJS.160x160.transparent.png ├── ZephJS.160x160.white.png ├── ZephJS.320x320.transparent.png ├── ZephJS.320x320.white.png ├── ZephJS.32x32.transparent.png ├── ZephJS.32x32.white.png ├── ZephJS.640x640.transparent.png ├── ZephJS.640x640.white.png ├── ZephJS.64x64.transparent.png └── ZephJS.64x64.white.png ├── package-lock.json ├── package.json ├── src ├── .eslintignore ├── .eslintrc.js ├── Zeph.js └── cli │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CLI.js │ └── commands │ ├── Bundle.js │ ├── Create.js │ ├── Hello.js │ └── Serve.js ├── test ├── .eslintignore ├── .eslintrc.js ├── BrowserMocks.js ├── ZephComponents.js └── ZephComponentsWithoutImport.js └── zeph.min.js /.eslintignore: -------------------------------------------------------------------------------- 1 | examples/RatingStars/*.min.js 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | "extends": "eslint:recommended", 5 | parserOptions: { 6 | sourceType: "module", 7 | ecmaVersion: 8 8 | }, 9 | env: { 10 | es6: true 11 | }, 12 | rules: { 13 | "no-self-assign": [ 14 | "off" 15 | ], 16 | indent: [ 17 | "error", 18 | "tab", 19 | { "SwitchCase": 1 } 20 | ], 21 | semi: [ 22 | "error", 23 | "always" 24 | ], 25 | "require-await": [ 26 | "error" 27 | ], 28 | "no-constant-condition": [ 29 | "off" 30 | ] 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | Example.js 3 | zeph.bat 4 | glen*.* 5 | -------------------------------------------------------------------------------- /CODE-OF-CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at legal@awesomeeng.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at contrib@awesomeeng.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | 78 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | Copyright 2018-2019 The Awesome Engineering Company 3 | 4 | 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: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | 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. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![npm](https://img.shields.io/npm/v/zephjs.svg "npm Details") 2 | ![GitHub](https://img.shields.io/github/license/awesomeeng/zephjs.svg "License Details") 3 | ![npm](https://img.shields.io/npm/dt/zephjs.svg "npm download stats") 4 | ![GitHub contributors](https://img.shields.io/github/contributors-anon/awesomeeng/zephjs.svg "Github Contributors") 5 | ![GitHub last commit](https://img.shields.io/github/last-commit/awesomeeng/zephjs.svg "Github Commit Log") 6 | ![Twitter Follow](https://img.shields.io/twitter/follow/zeph_js.svg "Follow us on Twitter!") 7 |
![node](https://img.shields.io/node/v/zephjs.svg "NodeJS") 8 | ![GitHub issues](https://img.shields.io/github/issues/awesomeeng/zephjs.svg "Github Issues") 9 | ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/awesomeeng/zephjs.svg "Synk Vulnerabilities Database") 10 | ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/zephjs.svg "Libraries.io Page") 11 | 12 | # ZephJS 13 | 14 | ZephJS is an easy, understandable, and ultra-light framework for defining and using Web Components. It is perfect for people writing component libraries, teams building applications or sites that just require a few custom components, or projects building whole applications that do not want all the weight of a modern JavaScript Browser framework. ZephJS simplifies the process of defining custom Web Components into a declarative, highly readable structure that uses standard JavaScript, standard HTML markup, and standard CSS Styling. 15 | 16 | ZephJS aims to bring the promised ease of web components back to the community. It does so by living up to the following principles: 17 | 18 | - Define new components simply in a readable, declarative manner. 19 | - Make it easy for a component or component library to be used by others. 20 | - Use the standards and technologies that have made the web great. 21 | - Never try to outwit the browser. 22 | - Keep it incredibly small and light. 23 | 24 | ZephJS is often called just "Zeph" and pronounced "Zef". 25 | 26 | ## Features 27 | 28 | ZephJS has the following features... 29 | 30 | - Easily define Web Components; 31 | - Extremely readable declarative syntax; 32 | - Uses 100% Standard Browser APIs; 33 | - Uses 100% Standard JavaScript/ES2018; 34 | - Uses 100% Standard HTML, inline or separated; 35 | - Uses 100% Standard CSS, inline or separated; 36 | - Encapsulated styles and content do not leak; 37 | - Components can extend other components; 38 | - Value propagation via Attribute/Property/Content binding; 39 | - Supports building one-off components; 40 | - or Supports building component libraries; 41 | - or Supports building entire applications; 42 | - Included CLI for easy new component scaffolding; 43 | - Included Bundler (using Rollup) to package into a single distributable; 44 | - and ZephJS is under 20k minified! 45 | 46 | ## Get Started 47 | 48 | ZephJS has four different use cases that are addressable as one gets started: 49 | 50 | - **[Using a Web Component Library](./docs/GetStartedUsing.md)** built on top of ZephJS; 51 | - **[Building a Web Component Library](./docs/GetStartedLibrary.md)** on top of ZephJS; 52 | - **[Building a Web Site with Custom Components](./docs/GetStartedSite.md)** using ZephjS; 53 | - **[Building a Web Application](./docs/GetStartedApplication.md)** using ZephJS. 54 | 55 | Pick the best way to get started for you and start using ZephJS today! 56 | 57 | ## Additional Information 58 | 59 | ##### Documnetation 60 | 61 | ZephJS Provides a ton of documentation to help you use it... 62 | 63 | **Getting Started** 64 | - [Introducing ZephJS](./docs/Introducing.md) 65 | - [Component Quick Start Guide](./docs/ComponentQuickStart.md) 66 | - [Frequently Asked Questions](./docs/FAQ.md) 67 | 68 | **Components** 69 | - [Component Quick Start Guide](./docs/ComponentQuickStart.md) 70 | - [Component Concepts](./docs/ComponentConcepts.md) 71 | - [Creating a New Component](./docs/ComponentCreation.md) 72 | - [Importing ZephJS](./docs/ComponentImporting.md) 73 | - [Defining the Component](./docs/ComponentDefinition.md) 74 | - [Inheritance](./docs/ComponentInheritance.md) 75 | - [HTML](./docs/ComponentMarkup.md) 76 | - [CSS](./docs/ComponentStyling.md) 77 | - [Resources](./docs/ComponentAssets.md) 78 | - [Attributes](./docs/ComponentAttributes.md) 79 | - [Properties](./docs/ComponentProperties.md) 80 | - [Lifecycle Handlers](./docs/ComponentLifecycleHandlers.md) 81 | - [Bindings](./docs/ComponentBindings.md) 82 | - [Event Handlers](./docs/ComponentEvents.md) 83 | 84 | **Services** 85 | - [Services](./docs/Services.md) 86 | 87 | **APIs** 88 | - [API Documentation](./docs/API.md) 89 | 90 | **Bundling** 91 | - [Bundling for Distribution](./docs/ComponentBundling.md) 92 | 93 | **Command Line Tool** 94 | - [Command Line Tool](./docs/CLI.md) 95 | 96 | ##### Command Line Reference 97 | 98 | ZephJS ships with a little command line tool (CLI) to help with your ZephJS related needs. This is installed locally when you install ZephJS via npm and can be accessed with the shell command `zeph`. It has the following syntax: 99 | 100 | ```shell 101 | zeph 102 | ``` 103 | 104 | There are a number of commands you can do. Very quickly: 105 | 106 | - **`hello`**: Generate the example hello world application. 107 | - **`create`**: Create a new component including .js, .html, and .css stub files. 108 | - **`serve`**: Run a small Web Server on http://localhost:4000 that will serve the current directory. 109 | - **`bundle`**: Bundle multiple ZephJS components into a single file. 110 | 111 | > For more information, see our documentation on the [Zeph Command Line Interface](./docs/CLI.md). 112 | 113 | ##### Examples 114 | 115 | ZephJS ships with a set of examples for your reference. 116 | 117 | - [QuickStartExample](./examples/QuickStartExample): Our example from the [Quick Start](./docs/ComponentQuickStart.md) guide. 118 | 119 | - [BasicComponent](./examples/BasicComponent): An example of a basic component. 120 | 121 | - [HelloBadge](./examples/HTTPSServer): A slightly bigger example of a component which uses a second component. 122 | 123 | - [ExampleCollection](./examples/ExampleCollection): An example of grouping several components together into a single file, called a collection. 124 | 125 | - [ExampleService](./examples/ExampleService): An example of using the ZephService class to build a re-usable service. 126 | 127 | - [RatingStars](./examples/RatingStars): An example of using resources and bundling. 128 | 129 | ## Browser Compatability 130 | 131 | ZephJS is built on modern browser standards and thus requires a modern browser to work. In particular it requires the following Web Standards: Shadow DOM v1, Custom Elements v1, Mutation Observer, and Fetch. 132 | 133 | The following browser compatability chart indicates which browsers are supported and which are not. (All browser statistics taken from [caniuse.com](https://caniuse.com) and used under the conditions of thier license.) 134 | 135 | | Browser | Minimum Required Version | Notes 136 | |-----------------------------|--------------------------|---------------------------- 137 | | **Firefox** | 63 | | 138 | | **Chrome** | 54 | | 139 | | **Safari** | 10.1 | :host and ::slotted psuedo-selectors are buggy. 140 | | **Opera** | 41 | | 141 | | **Microsoft Edge** | 15 (with Polyfill) | Requires use of Polymer polyfill. See [ZephJS Polyfill Documentation](./docs/Polyfill.md). 142 | | Microsoft Internet Explorer | NOT SUPPORTED | | 143 | | **IOS Safari** | 10.3 | :host and ::slotted psuedo-selectors are buggy. 144 | | **Android Browser** | 67 | | 145 | | Blackberry Browser | NOT SUPPORTED | No support as ov v10. 146 | | **Opera Mobile** | 46 | | 147 | | **Chrome for Android** | 71 | | 148 | | **Firefox for Android** | 64 | | 149 | | IE Mobile | NOT SUPPORTED | No support as of v11 150 | | **UC Browser for Android** | 11.8 | | 151 | | **Samsung Internet** | 6.2 | | 152 | | QQBrowser | NOT SUPPORTED | No support as of v1.2 153 | | Baidu Browser | NOT SUPPORTED | No support as of v7.12 154 | (Chart last updated Feb 25, 2019) 155 | 156 | ## The Awesome Engineering Company 157 | 158 | ZephJS is written and maintained by The Awesome Engineering Company. The Awesome Engineering Company believes in building clean, configurable, creative software for engineers and architects and customers. 159 | 160 | To learn more about The Awesome Engineering Company and our suite of products, visit us on the web at https://awesomeeng.com. 161 | 162 | ## Support and Help 163 | 164 | This product is maintained and supported by The Awesome Engineering Company. For support please [file an issue](./issues) or contact us via our Webiste at [https://awesomeeng.com](https://awesomeeng.com). We will do our best to respond to you in a timely fashion. 165 | 166 | ## License 167 | 168 | ZephJS is released under the MIT License. Please read the [LICENSE](./LICENSE) file for details. 169 | -------------------------------------------------------------------------------- /RELEASE_NOTES.md: -------------------------------------------------------------------------------- 1 | # AwesomeComponents Release Notes 2 | 3 | #### **Version 1.3.1** 4 | 5 | - Fixes an error in handleAttributeMutation which would occur when an attribute that is bound is changed. 6 | 7 | #### **Version 1.3.0** 8 | 9 | - Proofreading update to all the documentation thanks to @circleofconfusion who is the coolest! 10 | 11 | - **Adds inline() definintion method to force the component to not use a shadow root for its content. When in inline mode, all html/css will be placed as descendants of the element instead of in the element shadow. For CSS this will insert the CSS at the top level of the document and this can have some side effects. Also when in inline mode, bindAt and eventAt will query inline instead of into the non-existent shadow.** 12 | 13 | - **adds onContent() definition method for getting content change events.** 14 | 15 | - **Adds ability for getAttribute to return more than just strings.** 16 | 17 | - **Adds method() definition method for declaring methods on the created element.** 18 | 19 | - Adds options argument to fecth() methods. 20 | 21 | - adds tests for method(). 22 | 23 | - onAttribute() can now take a wildcard character as the attribute name and get notified of all attribute changes." 24 | 25 | - fixes bug in binding removed attributes. 26 | 27 | - Fixes bug in check.boolean. 28 | 29 | - Cleaned up some errant debug statements. 30 | 31 | - Updated dependencies. 32 | 33 | - Removed justifcation section from docs. 34 | 35 | - Adds contributor code of conduct. 36 | 37 | - Fix minor licenses typo. 38 | 39 | - Updating Help and Support Readme text. 40 | 41 | - Remove zeph.full.js and make all references to it and zeph.min.js into just Zeph.js references. 42 | 43 | #### **Version 1.2.0** 44 | 45 | - **Adds a new definition method called asset(). This method is used to 46 | identify external assets such as images, audio clips, or video clips, which are 47 | required by the component. These assets are loaded and then injected into the 48 | associated elements for those assets. Then, when you bundle your components up 49 | the bundle will inline those assets into the bundled output, thus creating a 50 | single distributable for the entire component.** 51 | 52 | - Documentation updates for asset(). 53 | 54 | - Test updates for asset(). 55 | 56 | - **Performance improvements for creating new elements which should result 57 | in a 3 fold reduction in time and overhead.** 58 | 59 | - Update dependencies, specifically to use AwesomeServer 1.4.0 and AwesomeUtils 1.4.8. 60 | 61 | - Fix for bundle cli command to download external url references. 62 | 63 | - Adds a FAQ section to the documentation. 64 | 65 | - Updates project readme with shields/badges about project status. 66 | 67 | - Adds some basic logos for ZephJS. 68 | 69 | #### **Version 1.1.1** 70 | 71 | - **Adds support for MS Edge via polyfill. Added supporting documentation.** 72 | 73 | - Adds warning message for unsupported browsers. 74 | 75 | #### **Version 1.1.0** 76 | 77 | - Adds the optional ability to use a destructured object in your definition function to expose the definition methods instead of using `import`. 78 | 79 | - Minor documentation edits for Component Concepts. 80 | 81 | #### **Version 1.0.0** 82 | 83 | - Documentation Editing 84 | 85 | - Adds API documentation. 86 | 87 | - Adds JSDOC to Zeph.js source code. 88 | 89 | - Fixes broken documentation links. 90 | 91 | - ZephService documentation. 92 | 93 | - Fixes a bug which might cause events on ZephServices to emit twice. 94 | 95 | - Renames ZephElementObserver to ZephObserver. 96 | 97 | - Fixes broken regression test. 98 | 99 | #### **Version 0.5.0** 100 | 101 | - Updates to documentation to make ZephJS more user focused. 102 | 103 | - Remove ZephServices. 104 | 105 | - Adds minor log information to serve cli command. 106 | 107 | - Fixes inheritance bug with inherited context not being copied correctly. 108 | 109 | - Adds alias() definition method. 110 | 111 | - serve cli command now will serve Zeph.js from src. 112 | 113 | #### **Version 0.4.2** 114 | 115 | - Moved Rollup and Acorn into dependencies for devDependencies. 116 | 117 | #### **Version 0.4.1** 118 | 119 | - Fixing zeph command line tool to correctly start. 120 | 121 | - Fixing some minor linting issues. 122 | 123 | #### **Version 0.4.0** 124 | 125 | - **BREAKING CHANGE**: You should now use `./zeph.min.js` or `./zeph.full.js` in your code instead of `./src/Zeph.js`. 126 | 127 | - Adds minification. 128 | - Updated cli with new options and minification usage. 129 | - Adds minify package to dependencies. 130 | - Updates documentation for minification. 131 | 132 | - Reduced code footprint. Adds better checking when resolving url names. 133 | 134 | - Adds onProperty() lifecycle event and associated tests. 135 | 136 | Fixed a pending promise resolution bug on components that inherit using from(). 137 | 138 | #### **Version 0.3.1** 139 | 140 | - Fixes bug with fetchText returning undefined when fetch content is empty. 141 | 142 | - Fixes bug with document.createElement() not working with ZephComponents. 143 | 144 | - Changed language around Mistral in readme. 145 | 146 | #### **Version 0.3.0** 147 | 148 | - adds component inheritance via from(). 149 | 150 | - adds options to html() and css(): 151 | - overwrite: to overwrite html content instead of appending 152 | - noRemote: to disable attempting to remotely find content. 153 | 154 | - Refactor not functions to be more expressive. 155 | 156 | - Exposes ZephUtils and added ZephUtils.ready(). 157 | 158 | - Fixes bug in onAttribute() not firing. 159 | 160 | - Updated tests and adds inheritance test. 161 | 162 | - Locks dependency versions. 163 | 164 | - Adds feature list to readme. 165 | 166 | - Add Browser Compatability table to readme. 167 | 168 | - Add documentation references to zephjs-loading and zephjs-router. 169 | 170 | - Updates documentation for onAttribute to reflect correct handler signature. 171 | 172 | - Adds CLI information to documentation. 173 | 174 | - Minor inline documentation changes for the CLI tools. 175 | 176 | #### **Version 0.2.0** 177 | 178 | - Bundle now uses rollup.js and works with new ES Module structure. 179 | 180 | - Fixes bug in lifecycle events firing incorrectly. 181 | 182 | - Zeph CLI now shows help is no sub-command provided. 183 | 184 | #### **Version 0.1.1** 185 | 186 | - Fixes broken reference to AwesomeUtils. 187 | 188 | #### **Version 0.1.0** 189 | 190 | - Beta release and ongoing development work. 191 | 192 | - Refactored to use ES Modules. 193 | 194 | - Adds attribute() and property(). 195 | 196 | - Restructured bindings to just bind() and bindAt(). 197 | 198 | - Revamped documentation greatly. 199 | 200 | - Updated tests for new structure. 201 | 202 | #### **Version 0.0.1** 203 | 204 | - Alpha release and ongoing development work. 205 | -------------------------------------------------------------------------------- /benchmark/.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesomeeng/zephjs/5ebd2ba58269f8b3861d26fc0438730977d6749c/benchmark/.eslintignore -------------------------------------------------------------------------------- /benchmark/.eslintrc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | "extends": "eslint:recommended", 5 | parserOptions: { 6 | sourceType: "module", 7 | ecmaVersion: 8 8 | }, 9 | env: { 10 | browser: true, 11 | es6: true 12 | }, 13 | rules: { 14 | "no-self-assign": [ 15 | "off" 16 | ], 17 | indent: [ 18 | "error", 19 | "tab", 20 | { "SwitchCase": 1 } 21 | ], 22 | semi: [ 23 | "error", 24 | "always" 25 | ], 26 | "require-await": [ 27 | "error" 28 | ], 29 | "no-constant-condition": [ 30 | "off" 31 | ] 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /benchmark/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zeph - Examples - BasicComponent 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /benchmark/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Zeph/benchmark", 3 | "version": "1.0.0", 4 | "author": "the awesome engineering company", 5 | "license": "(c) 2018-present, The Awesome Engineering Company, inc", 6 | "dependencies": { 7 | "zephjs": "*" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /benchmark/zeph-benchmark-row.js: -------------------------------------------------------------------------------- 1 | // (c) 2018-present, The Awesome Engineering Company, https://awesomeneg.com 2 | 3 | import "./zeph-benchmark-row.js"; 4 | 5 | import {ZephComponents,html} from "./Zeph.js"; 6 | 7 | ZephComponents.define("zeph-benchmark-row",()=>{ 8 | html("
this is a row.
"); 9 | }); 10 | -------------------------------------------------------------------------------- /benchmark/zeph-benchmark.js: -------------------------------------------------------------------------------- 1 | // (c) 2018-present, The Awesome Engineering Company, https://awesomeneg.com 2 | 3 | import "./zeph-benchmark-row.js"; 4 | 5 | import {ZephComponents,onAdd} from "./Zeph.js"; 6 | 7 | ZephComponents.define("zeph-benchmark",()=>{ 8 | const rows = 10000; 9 | 10 | const runAppendTest = (element,content)=>{ 11 | while (content.firstChild) content.removeChild(content.firstChild); 12 | 13 | let start = Date.now(); 14 | new Array(rows).fill(0).forEach(()=>{ 15 | let e = document.createElement("zeph-benchmark-row"); 16 | content.appendChild(e); 17 | }); 18 | return Date.now()-start; 19 | }; 20 | 21 | onAdd((element,content)=>{ 22 | console.log("Running performance tests..."); 23 | 24 | setTimeout(()=>{ 25 | let passes = 10; 26 | let total = 0; 27 | new Array(passes).fill(0).forEach(()=>{ 28 | let spent = runAppendTest(element,content); 29 | total += spent; 30 | console.log(rows+" rows appended: "+spent+" ms."); 31 | }); 32 | console.log("Average Total Time: "+(total/passes)+" ms."); 33 | },1000); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /bin/.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/awesomeeng/zephjs/5ebd2ba58269f8b3861d26fc0438730977d6749c/bin/.eslintignore -------------------------------------------------------------------------------- /bin/.eslintrc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | "extends": "eslint:recommended", 5 | parserOptions: { 6 | ecmaVersion: 8 7 | }, 8 | env: { 9 | node: true, 10 | es6: true 11 | }, 12 | rules: { 13 | "no-self-assign": [ 14 | "off" 15 | ], 16 | indent: [ 17 | "error", 18 | "tab", 19 | { "SwitchCase": 1 } 20 | ], 21 | semi: [ 22 | "error", 23 | "always" 24 | ], 25 | "require-await": [ 26 | "error" 27 | ], 28 | "no-constant-condition": [ 29 | "off" 30 | ] 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /bin/zeph: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // (c) 2018-present, The Awesome Engineering Company, https://awesomeneg.com 4 | 5 | require("../src/cli/CLI.js"); 6 | -------------------------------------------------------------------------------- /docs/CLI.md: -------------------------------------------------------------------------------- 1 | # [ZephJS](../README.md) > Command Line Interface 2 | 3 | ZephJS ships with a little command line tool (CLI) to help with your ZephJS related needs. This is installed locally when you install ZephJS via npm and can be accessed with the shell command `zeph`. It has the following syntax: 4 | 5 | ```shell 6 | zeph 7 | ``` 8 | 9 | There are a number of commands you can do and each is detailed below. 10 | 11 | ### `zeph help` 12 | 13 | ```shell 14 | zeph [command] help 15 | ``` 16 | 17 | Displays the ZephJS CLI Tool help interface. 18 | 19 | If you provide a valid command followed by the word `help` ZephJS will display help for the specific command. 20 | 21 | ### `zeph hello` 22 | 23 | ```shell 24 | zeph hello 25 | ``` 26 | 27 | Generate the ZephJS hello-world example component. hello-world is a very, very simple example of using ZephJS. 28 | 29 | ### `zeph create` 30 | 31 | ```shell 32 | zeph create [options] [filename] 33 | ``` 34 | 35 | The `create` command is used to create scaffolding for a new component. This command takes one required argument and one optional argument: 36 | 37 | - `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. 38 | - `filename`: Optional filename to write the component out as. If not provided ZephJS will use the `component-name` as the filename. 39 | - `--nozeph`: When provide, do not copy the `zeph.min.js` file locally. 40 | 41 | So for example: 42 | 43 | ```shell 44 | zeph create my-button 45 | ``` 46 | 47 | Would create the following files in the current directory: 48 | 49 | **my-button.js** 50 | ```javascript 51 | 1: 52 | 2: /* 53 | 3: Generated ZephS component: my-button 54 | 4: 55 | 5: ZephJS is copyright 2019, The Awesome Engineering Company 56 | 6: and is released under the MIT license. 57 | 7: */ 58 | 8: 59 | 9: import {ZephComponents,html,css} from "./Zeph.js"; 60 | 10: 61 | 11: ZephComponents.define("my-button",()=>{ 62 | 12: html("./my-button.html"); 63 | 13: css("./my-button.css"); 64 | 14: 65 | 15: // Place your component definition calls here. See the ZephJS documentation for more information. 66 | 16: }); 67 | 17: 68 | ``` 69 | 70 | **my-button.html** 71 | ```html 72 | 1: 73 | 2: 74 | 3: 75 | ``` 76 | 77 | **my-button.css** 78 | ```css 79 | 1: 80 | 2: /* Place your ZephJS CSS code here. See the ZephJS documentation for more information. */ 81 | 3: 82 | ``` 83 | 84 | ### `zeph serve` 85 | 86 | ```shell 87 | zeph serve [--port ] [path_to_serve] [ ...] 88 | ``` 89 | 90 | The `serve` command spins up a small HTTP Server on localhost for the given port (defaults to 4000). This HTTP Server will then serve the current directory. You can provide additional other directories to serve as needed. 91 | 92 | The command has the following optional arguments: 93 | 94 | - **`--port `**: Provide an alternate port to serve from. By default port 4000 is used. 95 | - **`path_to_serve`**: Zero or more alternate paths to serve. 96 | 97 | Serve will serve the current directory if no `path_to_serve` is provided. Additionally, any reference to `Zeph.js` or `zeph.min.js` will also be appropriately served. 98 | 99 | Internally the `serve` command uses both [AwesomeServer](https://github.com/awesomeeng/awesome-server) and [AwesomeLog](https://github.com/awesomeeng/awesome-log) if you are interested in either of those libraries. 100 | 101 | ### `zeph bundle` 102 | 103 | ```shell 104 | zeph bundle [options] 105 | ``` 106 | 107 | A common use case of ZephJS is to build a collection of useful components, bundle them into a single script, and distribute that script. The ZephJS CLI tool has a helpful bundle utility to help you out. 108 | 109 | The bundle tool will read in the `source_filename` provided and bundle it with ZephJS into a single file `target_filename`. This takes care of all the dependencies, all the `html()` and `css()` external file references, everything. You end up with a single nice neat package. 110 | 111 | You can then distribute this package to your customers as a nice self-contained entity. 112 | 113 | The command has the following optional arguments: 114 | 115 | - **`source_filename`**: The filename to serve as an entry point to your bundle. 116 | - **`target_filename`**: The filename to write with the bundled content. 117 | - **`--quiet`**: If provided will disable status messages during the bundling process. 118 | - **`--full`**: If provided will bundle the full version of ZephJS `Zeph.js` instead of the minified version. This is useful in debugging sometimes. 119 | 120 | > There is a lot more information on the `bundle` command in our [Bundling for Distribution](./ComponentBundling.md) documentation. We highly recommend you read it if Bundling is something you are interested in doing. 121 | -------------------------------------------------------------------------------- /docs/ComponentAssets.md: -------------------------------------------------------------------------------- 1 | # [ZephJS](../README.md) > Writing Components > Assets 2 | 3 | ### Sections 4 | 5 | - [Quick Start](./ComponentQuickStart.md) 6 | - [Component Concepts](./ComponentConcepts.md) 7 | - [Creating a New Component](./ComponentCreation.md) 8 | - [Importing ZephJS](./ComponentImporting.md) 9 | - [Defining the Component](./ComponentDefinition.md) 10 | - [Inheritance](./ComponentInheritance.md) 11 | - [HTML](./ComponentMarkup.md) 12 | - [CSS](./ComponentStyling.md) 13 | - **Assets** 14 | - [Attributes](./ComponentAttributes.md) 15 | - [Properties](./ComponentProperties.md) 16 | - [Lifecycle Handlers](./ComponentLifecycleHandlers.md) 17 | - [Bindings](./ComponentBindings.md) 18 | - [Event Handlers](./ComponentEvents.md) 19 | - [Bundling for Distribution](./ComponentBundling.md) 20 | 21 | ### Assets 22 | 23 | Often times a component will have need to reference and use external assets like images, audio clips, or videos. In most component libraries these are externally packaged up and shipped along side the component script in a separate directory like "assets" or "resources". But this can often be a little cumbersome and clunky. So ZephJS fixes it for you. 24 | 25 | Within your component definition you may use the `asset()` definition methods (outlined below). With `asset()` you associate some ``, `