-
-
-
-
diff --git a/src/footer/footer.dative.html b/src/footer/footer.dative.html
deleted file mode 100644
index a94b7fd..0000000
--- a/src/footer/footer.dative.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
- Api
--
-
-
-
-
- slient -
-
-
-
-
-
-
- Global Config
--
-
-
-
- slient -
- Type: boolean
-
-Default: false
-
-Usage:
-
-
- -
-
-
Dative.config.slient = trueSuppress all Dative Logs and warnings
--
Global API
--
-
- Arguments:
- {Object} options Usage:
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- Create a "subclass" of the base Dative constructor. The argument - should be an object containing component options -
--
- The special case to note here is the
-
-
-
<div id="base-mount"></div>var Account = Dative.extend({
- template: '<p>{\{username}} Your NetWorth is {\{networth}}</p>'
- data(){
- return {
- username: 'Emeka Tobi',
- networth: '100M'
- }
- }
-})
-
-new Account({ el: '#base-mount' })-
Passing of props
--
<div id="base-mount"></div>var Account = Dative.extend({
- template: '<p>{\{username}} Your NetWorth is {\{networth}}</p>',
- props: {
- username: String,
- networth: String
- }
-})
-
-new Account({
- el: '#base-mount',
- props: {
- username: 'Emeka Tobi',
- networth: '100M'
- }
-})-
Props with type
--
<div id="base-mount"></div>var Account = Dative.extend({
- template: '<p>{\{username}} Your NetWorth is {\{networth}}</p>',
- props: {
- username: {
- type: String
- },
- networth: {
- type: String
- }
- }
-})
-
-new Account({
- el: '#base-mount',
- props: {
- username: 'Emeka Tobi',
- networth: '100M'
- }
-})-
-
Dative.version
--
-
-
- Details: Provides the installed version of Dative as a string
-
-
- -
Application api
--
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ;
--
-
- Details: Used to render the application
- Returns: The element that the application is mounted to
-
- It is used to render the component to mount element
--
app.$destroy()
--
-
- Details: Used to destroy the application
- Usage:
-
-
-
- Triggers the
- It disconnects the application from the element .
-
-
var app = new Dative({
- el: '#app',
- template: '<div>Hello!</div>',
- ondestroy(){
- console.log('Destroy')
- }
-})
-app.$destroy()-
app.use()
--
-
- Details: Used to install dative plugin to the application
- Usage:
-
-
-
- For Plugins that needs to access the template
- You need to use the mount function instead of the
-
- Or Else You'll Get An Error
-
-
var richPlugin = function({ instance }){
- instance.title = 'Dative v2-alpha has been released'
- instance.author = 'Emeka (Tobithealpha)'
-}
-var app = new Dative({
- el: '#app',
- template: `
- <div>
- <p>{\{title}}</p>
- <p>By -- {\{author}}</p>
- </div>
- `,
-})
-app.use(richPlugin)
--
app.set(obj)
--
-
-
- Details: Used to set an existing property in the application
-
- Usage:
-
-
- - {{"Note".toUpperCase()}}: If the Property you are setting - does not exists you might get an error or the property will not be - reactive -
--
var app = new Dative({
- data: {
- msg: 'Hola!'
- },
- oncreated() {
- console.log(this.msg)// => Hola!
- }
-})
-
-app.set({
- msg: 'Salut'
-})
-console.log(app.msg) // => Salut
-
-
-// Or with Non-Object Style
-app.set('msg', 'Salut')
-console.log(app.msg) // => Salut-
app.get(value?: string)
--
-
-
- Details: Used to get an existing property in the application
-
- Usage:
-
-
- - {{"Note".toUpperCase()}}: If the Property you are getting - does not exists you might get an error -
--
var app = new Dative({
- data: {
- api: {
- id: 'xasc-ewdxwqed-xdwqa'
- },
- msg: 'Hola!'
- },
- oncreated() {
- console.log(this.get('msg'))// => Hola!
- console.log(this.get('api.id'))// => xasc-ewdxwqed-xdwqa
- // Leaving the params with no parameter will return the whole instance
- console.log(this.get())// => Dative { }
- }
-})
-
-console.log(app.get('msg')) // => Hola!
-console.log(app.get('api.id'))// => xasc-ewdxwqed-xdwqa-
- app.attach(component: Function|Array<Function>) -
--
-
- Details: Used to attach a component to the application
- Usage:
-
-
- - See - Dative.extend -
-
- In Dative creating multiple instances the main and sub-instance
- works well but when using the sub-instance in the main
- instance.
- When the Main Instance Re-renders the sub-instance will be cleared
- so we introduce the attach methods to help
-
-
var Wallet = Dative.extend({
- template: `
- <div>
- <h1>Hola {\{username}}</h1>
- <h1>Your Wallet Balance is {\{balance}}</h1>
- <div>
- `,
- props: {
- username: {
- type: String
- },
- balance: {
- type: Number
- }
- }
-})
-
-var app = new Dative({
- el: '#app'
- template: `
- <div>
- <h1>Hello World</h1>
- <div id="sub"></div>
- </div>`
-})
-
-
-var wallet = new Wallet({
- el: '#sub',
- props: {
- username: 'Emeka (Tobithealpha)',
- balance: '29032'
- }
-})
-
-app.attach(wallet)
-// Or
-app.attach([wallet])
--
- app.detach(component: Function|Array<Function>) -
--
-
-
- Details: Used to detach (unlink/remove) a component to the
- application
-
- Usage:
-
-
- - It's used to remove a sub instance thats already attached to the - component -
--
var Wallet = Dative.extend({
- template: `
- <div>
- <h1>Hola {\{username}}</h1>
- <h1>Your Wallet Balance is {\{balance}}</h1>
- <div>
- `,
- props: {
- username: {
- type: String
- },
- balance: {
- type: Number
- }
- }
-})
-
-var app = new Dative({
- el: '#app'
- template: `
- <div>
- <h1>Hello World</h1>
- <div id="sub"></div>
- </div>`
-})
-
-
-var wallet = new Wallet({
- el: '#sub',
- props: {
- username: 'Emeka (Tobithealpha)',
- balance: '29032'
- }
-})
-
-
-app.detach(wallet)
-// Or
-app.detach([wallet])
--
-
-
-
- el -
- sanitize -
- template -
- computed -
- methods -
- - attach -
- animate -
- use -
- property -
- props -
- css -
- onmounted -
- oncreated -
- ondestroy -
-
- Options API
--
-
- el -
- Type: string | Element
-
-Details:
-
-
- -
- Provide the Dative instance an existing DOM element to mount on.
-
- It can be a class, id selector or an actual Element.
-
- After the instance is mounted, the resolved element will be
- accessible via
-
-
- sanitize -
- Type: boolean
-
-Details:
-
-
- -
- When the sanitize options is true, all the html inside the data
- property will be sanitized
-
- That means
-
- If you have a property in data like this
-
{
- data() {
- return {
- content: '<h1>Hello</h1>'
- }
- },
- sanitize: true,
- onmounted() {
- console.log(this.content) // => &\#38;lt&\#59;h1&\#62;Hello&\#38;lt&\#59;&\#47;h1&\#62;
- }
-}-
- template -
- Type: string
-
-Details:
-
-
-
- -
- A string template to be used as the markup for the dativejs
- instance.
- The template will replaced the mounted element.
- Any existing markup inside the mounted element be ignored.
-
-
- If the string starts with
- This allows the use of the common
-
-
--- From a security perspective, you should only use Dative templates - that You can trust. Never use user-generated content as your - template -
-
- computed -
-
- Type:
- { [x: string]: Function | { get: Function, set: Function }
- }
-
-
-Details:
-
- -
- Computed properties to be mixed into the Dative instance.
- Computed properties are cached, and only re-computed on reactive
- dependency changes. Note that if a certain dependency is out of the
- instance's scope (not reactive), the computed property will not be
- updated
-
- methods -
-
- Type: { [x: string]: Function }
-
-
-Details:
-
-
-
- -
- Methods to be mixed into the Dative instance. You Can access these
- methods directly on the instance, or use them in the directives
- expressions. All methods will have their
-
-
--- Note that - you should not use arrow function to define a methods (e.g. -
-inc: ()=> this.count++ ). The reason is arrow - functions bind the parent context, so -this will not be the Dative instance as you - expect andthis.count will be undefined -
-
--- Note: Also, Never try doing this -
-<button on:click="{\{inc()}}"></button> . Reason Why Is Because it will do infinite calls to the function - without even clicking the button -
- - attach -
-
- Type:
- Dative | DativeComponent | Array<DativeComponent |
- Dative>
-
-
-Details:
-
-
- -
- It is used to attach dative Component to an instance
- See
- Attach Methods For
- More Explanation
-
-
var Wallet = Dative.extend({
- template: `
- <div>
- <h1>Hola {\{username}}</h1>
- <h1>Your Wallet Balance is {\{balance}}</h1>
- <div>
- `,
- props: {
- username: {
- type: String
- },
- balance: {
- type: Number
- }
- }
-})
-
-var app = new Dative({
- el: '#app'
- template: `
- <div>
- <h1>Hello World</h1>
- <div id="sub"></div>
- </div>`
-})
-
-
-var wallet = new Wallet({
- el: '#sub',
- attach: app,
- props: {
- username: 'Emeka (Tobithealpha)',
- balance: '29032'
- }
-})- animate -
-
- Type:
- { [x: string]: DativeAnimate }
-
-
-Details:
-
- -
- It is used to create custom animations in the current instance
-
- See
- Animation For
- More Explanation
-
- use -
-
- Type: Array<DativePlugin>
-
-
-Details:
-
- -
- It is used to install plugins into the dative instance
- See Plugins For
- More Explanation
-
- property -
-
- Type:
- { [x: string]: DativeProperty }
-
-
-Details:
-
- -
- It is used to create custom property
- See Property For
- More Explanation
-
- props -
-
- Type:
- { [x: string]: DativeComponentProps } |
- DativeComponentProps
-
-
-Details:
-
-
-
- -
-
- {{"NOTE".bold()}}: The props options Works Only in the Dative.extend --
-
- It is used to create props for a dative extended instance
- See
- Dative.extend For
- More Explanation
-
- css -
- Type: string
-
-Details:
-
-
-
- -
-
- {{"NOTE".bold()}}: The props options Works Only in the Dative.extend --
-
- It is used to create styles in a dative extended instance
- See
- Dative.extend For
- More Explanation
-
- onmounted -
- Type: onmounted(): void
-
-Details:
-
-
-
- -
-
- {{"NOTE".bold()}}: The-mounted was renamed to -onmounted in Dative 2-alpha -
-
It is invoked when the application has been mounted
-- oncreated -
- Type: oncreated(): void
-
-Details:
-
-
-
- -
-
- {{"NOTE".bold()}}: The-created was renamed to -oncreated in Dative 2-alpha -
-
It is invoked when the application is created
-- ondestroy -
- Type: ondestroy(): void
-
-Details:
-
-
-
- -
-
- The-ondestroy is a new options in Dative - 2-alpha
- See $destroy For More - Explanation -
-
It is invoked when the application has been destroyed
--
-
- Last Modified: {{transformer(Date.now())}} -
-
-
-
diff --git a/src/footer/footer.dative.js b/src/footer/footer.dative.js
deleted file mode 100644
index c7628eb..0000000
--- a/src/footer/footer.dative.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Dative from "dativejs";
-import footer from "./footer.dative.html";
-
-export let Footer = Dative.extend({
- template: footer,
- data() {
- return {
- year: () => new Date().getFullYear(),
- };
- },
- props: {
- transformer: Function,
- },
-});
\ No newline at end of file
diff --git a/src/global.d.ts b/src/global.d.ts
deleted file mode 100644
index ca6d93d..0000000
--- a/src/global.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-declare module "*.dative.html" {
- const component: string;
- export default component;
-}
-
-declare module "*.png" {
- const img: string;
- export default img;
-}
-
-declare module "*.jpg" {
- const img: string;
- export default img;
-}
-declare module "*.css" {
- const css: string;
- export default css;
-}
diff --git a/src/guide/guide.dative.html b/src/guide/guide.dative.html
deleted file mode 100644
index 90d57d3..0000000
--- a/src/guide/guide.dative.html
+++ /dev/null
@@ -1,1229 +0,0 @@
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/home/home.dative.html b/src/home/home.dative.html
deleted file mode 100644
index d17c2ed..0000000
--- a/src/home/home.dative.html
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
- -
-
-
-
-
-
- Getting Started
-
-
-
-
-
-
-
-
What Is DativeJS
--
DativeJS is a Mordern Ui JavaScript Framework
-Usage
-
# use this to create a dative template
-npx degit dativeJs/template my-app
-cd my-app
-npm install-
The template scaffolded contains all the necessary dependencies needed to get started with dativejs as a Beginner
-The template scaffolded also uses Rollup to Bundle and Serve the Project Behind the Scene
--
Installation
-
-
-DativeJs v2-alpha is a new approach. It's syntax is quiet different from the v2-v1.The installation is easy.There are two ways to install it.
--
-
- Cdn -
- Npm -
- Yarn -
-
-
Cdn
-<!-- Development -->
-<script src="https://unpkg.com/dativejs@v2.0.0-alpha.1/dist/dative.js"></script>
-<!-- Production -->
-<script src="https://unpkg.com/dativejs@v2.0.0-alpha.1/dist/dative.min.js"></script>
-<!-- Es Module -->
-<script type="module">
- import Dative from 'https://unpkg.com/dativejs@v2.0.0-alpha.1?module'
-
- /* Notice the we did not do app.render() again. In DativeJs v2-alpha the application will automatically render when there is el/target options {{'\n'}} Also notice the template: '#template' DativeJs v2-alpha can now accept id in the template the id must be from a script tag */
-
-
- var app = new Dative({
- el: '#app',
- data: ()=>({
- name: 'John'
- }),
- template: '#template'
- })
-</script>
--
-
- -
- Data And Methods Property -
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
-
-
- Data property -
--
-
-
- Data Property in Your Dative Instance is the store for your - instance, Which Means it's what hold all the reactivity of your - application. -
-
- If you Coming from reactjs, data property is similar to the
- state property :
-
-
// reactjs
- ...
-
-class App extends React.Component {
- ...
- state = {
- foo: 'bar'
- }
- render() {
- return (
- <>
- <h1>Hello {this.state.foo}</h1>
- </>
- )
- }
-}-
- If you Coming from vuejs, data property is similar to the
- data property :
-
-
<!-- vuejs -->
-<template>
- <h1>Hello {\{foo}}</h1>
-</template>
-<script>
-export default {
- ...,
- data: () => ({
- foo: 'bar'
- }),
- ...
-}
-</script>-
- How To Write The data property in Your
- dative instance
-
- The data property can be either
-
<div>
- <h1>Hello {\{foo}}</h1>
-</div>-
import Dative from 'dativejs';
-
-var app = new Dative({
- ...,
- data: {
- foo: 'bar'
- },
-})
--
import Dative from 'dativejs';
-
-var app = new Dative({
- ...,
- data: function() {
- return {
- foo: 'bar'
- }
- },
-})
--
import Dative from 'dativejs';
-
-var app = new Dative({
- ...,
- data: () => ({
- return {
- foo: 'bar'
- }
- }),
-})
-- - -
Quiet Easy Right, And it's same as in Vuejs
--
Computed
-
-
-
-
-
-
-
-
- The Template Interpolation
- {\{expression}}
- are very convenient, but they are meant for simple operations.
- Putting too much logic in your templates can make them bloated and
- hard to maintain.
- For example:
-
<div>
- {\{ username.split(' ')[0].charAt(0) }}
-</div>-
- Now the template is no longer simple and declarative. You have to - look at it for a second before you can understand the code. The - problem is made worse when you want to include the code in your - template more than once. -
--
- That's why for a complex logic, You need to use a computed property -
-Basic Example
-<div>
- {\{ splitted }}
-</div>-
var app = new Dative({
- ...,
- data: () => ({
- username: "Tobi theAlpha"
- }),
- computed: {
- splitted: function(){
- return this.username.split(' ')[0].charAt(0)
- }
- }
-})-
- Here we have declared a computed property
- splitted. The function we provided
- will be used as the getter function for the property
- app.splitted:
-
console.log(app.splitted) // => T
- app.username = 'Dev Tobi'
- console.log(app.splitted) // => D
--
- Computed Getter and Setter -
-- By Default, Computed are getters only, but you can also provide a - setter when you need -
-// ...
- computed: {
- fullname: {
- get: function() {
- return this.firstName + " " + this.lastName
- },
- set: function(val) {
- const value = val.split(' ')
- this.firstName = value[0]
- this.lastName = value[1]
- }
- }
- }
-// ... -
- Now when you run
- app.fullname = 'Chuck Norris', the
- setter will be invoked and
- app.firstName and
- app.lastName will be updated
- accordingly
-
-
Conditional Rendering
-
- In DativeJs v2-alpha the
-
- In DativeJs v2-alpha the dv-if has been deprecated
- But You might be asking why?
----
-- First, The
-dv-ifdirective doesn't work well something- Secondly, It doesn't have
-dv-else | dv-else-if
- So in DativeJs v2-alpha we introduced the
-
-So in DativeJs v2-alpha we introduced the{\{#if condition}} Block.Which also have{\{:else if condition}} and{\{:else}} and end the block with{\{/if}}
- Usage
-import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- msg: 'DativeJs v2-alpha is litt',
- show: true
- }),
- template: '#template'
-});-
<div>
- {\{#if show}}
- <h1>{\{msg}}</h1>
- {\{/if}}
-</div>{\{:else if}}
-<div>
- {\{#if show}}
- <h1>{\{msg}}</h1>
- {\{:else if show && !msg}}
- <h1>Elseif</h1>
- {\{/if}}
-</div>{\{:else}}
-<div>
- {\{#if show}}
- <h1>{\{msg}}</h1>
- {\{:else if show && !msg}}
- <h1>Elseif</h1>
- {\{:else}}
- <h1>Else</h1>
- {\{/if}}
-</div>-
For Loop
-
-
-
- -
-
-
-
-
-
-
-
-
-
In DativeJs v2-alpha looping in an array is more easier
----
Before we do something like this
-- -template: ` - <div> - ${this.data.todos.map((data)=>{ - return `<h1>${data}</h1>` - }).join("")} - </div> -`
-So Now in DativeJs v2-alpha we introduced the
-
-So Now in DativeJs v2-alpha we introduced the{\{#each}} Block which ends the block with{\{/each}}
- Usage
-import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- todos: [
- {
- id: 0,
- title: 'Working'
- },
- {
- id: 1,
- title: 'Testing'
- }
- ]
- }),
- template: '#template'
-});-
<div>
-<!--'todos' is the property and the 'todo' is the alias-->
-{\{#each todos as todo}}
- <h1>{\{todo.title}}</h1>
-{\{/each}}
-</div>With Index
-<div>
- {\{#each todos as i,todo}}
- <h1>{\{i}}: {\{todo.title}}</h1>
- {\{/each}}
-</div>- -
-
-
Deconstruction
--The
-#eachdeconstruction doesn't work wellSo you'll have to use the
-#withto deconstruct
-
import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- items: [
- {
- message: 'Hello world',
- rating: 6
- },
- {
- message: 'Hello mic!!',
- rating: 9
- }
- ]
- }),
- template: '#template'
-});-
<ul>
-{\{#each items as i,items}}
- {\{#with items}}
- <li>{\{message}} {\{rating}}</li>
- {\{/with}}
-{\{/each}}
-</ul>-
Looping of number
-Looping of number with the #each block can not work
-
So we made a solution for that. Install dative-helper to get some cool powerful helper functions to use with Dativejs
-
The dative-helper has a $range function which converts a single number into an array.
You want to learn about dative-helper visit Dative-helper docs site
-
{\{#each $range(6) as n}}
- <h{\{n}}>{\{n}}</h{\{n}}>
-{\{/each}}-
-
Extend
-
-
- In DativeJs v2-alpha we've added a new Global methods Dative.extend()
----
-- The extend methods is used to make a component with DativeJs
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Learn More About Animate Directive -
-
-
-
-
- Usage
-import Dative from 'dativejs';
-
-// Create first Component
-const Component1 = Dative.extend({
- template: `
- <h1>Hello world</h1>
- `
-})
-
-// Initialize the component
-
-var app = new Component1({
- el: 'app-component', // or an id or a class selector
-})
-Usage in html
-<!DOCTYPE html>
-<html>
- <head>
- <script src="/public/build/bundle.js"></script>
- </head>
- <body>
- <app-component><\/app-component>
- </body>
-</html>-
Css in Dative.extend
-By default component css are scoped
-import Dative from 'dativejs';
-
-// Create first Component
-const Component1 = Dative.extend({
- template: `
- <h1 class="big">Hello world</h1>
- `,
- css: `
- .big{
- font-size: 60px;
- color: red;
- }
- `
-})-
How does the scoped css works
--Dative will add a dynamic attribute with a unique key to all the child of the instance with the css options.Example
-
-
This will be turned into
-<h1 class="big">Hello world</h1>-
<h1 class="big" data-dative-css="2364c-26442ag-9522">Hello world</h1>-
And the css will be turned into
-.big{
- font-size: 60px;
- color: red;
-}-
.big[data-dative-css~="2364c-26442ag-9522"],[data-dative-css~="2364c-26442ag-9522"] .big {
- font-size: 60px;
- color: red;
-}- -
Just like the idtotemplate converter for the Template option, The css options also have it so it means that the css can be written externally and brought to the css options with the id
-- {{"Note".toUpperCase()}}: If you are going to write the css styles externally,it should be in a style tag -
-
import Dative from 'dativejs';
-
- // Create first Component
- const Component1 = Dative.extend({
- template: `
- <h1 class="big">Hello world</h1>
- `,
- css: "#css"
- })-
"text/dss" is to tell the browser that this is not css so it doesn't compile it as css.Dss stands for dative stylesheet
-
<style type="text/dss" id="css">
-.big{
- font-size: 60px;
- color: red;
-}</style>-
- {{"Note".toUpperCase()}}: mustache also works in the css -
-
import Dative from 'dativejs';
-
- // Create first Component
- const Component1 = Dative.extend({
- data(){
- return {
- colors: ['red','blue','green']
- }
- },
- template: `
- <h1 class="big">Hello world</h1>
- `,
- css: "#css"
- })-
<style type="text/dss" id="css">
-.big{
- font-size: 60px;
- color: red;
-}
-{\{#each colors as color}}
- .bg-{\{color}} {
- background: {\{color}};
- }
- .text-{\{color}} {
- color: {\{color}};
- }
-{\{/each}}
-</style>-
- {{"Note".toUpperCase()}}: pseudo must be after a selector.
- :global() does not work in the component css -
-
Props
-Props in Dative.extend works can be done by doing some few things.Props is always written in an object syntax with a "type" (optional)
-
import Dative from 'dativejs';
-
- // Create first Component
- const Component1 = Dative.extend({
- template: `
- <h1>Hello {\{name}}</h1>
- `,
- props:{
- name: {
- type: String
- }
- }
- })-
Or without type
-
import Dative from 'dativejs';
-
- // Create first Component
- const Component1 = Dative.extend({
- template: `
- <h1>Hello {\{name}}</h1>
- `,
- props:{
- name: String
- }
- })-
Using the props
-import Dative from 'dativejs';
-
-var app = new Component1({
- el: 'app-component',
- props:{
- name: 'World'
- }
-})-
Event handling
-
-
-Listening to Events
-We can use the dv-on directive to listen to DOM events and run some JavaScript when they’re triggered.
--For example: -
-import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- count: 0
- })
-});-
<div>
- <h1>{\{count}}</h1>
- <button dv-on:click="count+=1">Increment</button>
-</div>Using the methods options
--
import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- count: 0
- }),
- methods:{
- add(){
- this.count++
- }
- },
-});<div>
- <h1>{\{count}}</h1>
- <button dv-on:click="add()">Increment</button>
-</div>-
Property DativeJs
-
-
-
-
-
-Global (Constructor) method
-
-
-
-Options
-
-
-
-Which of one is Global and which Scoped ?
-
-
-
-
-
- The defineProperty is an alias of the
- Dative.prototype
-
- That means the defineProperty is used
- to make global property.
-
-
What Is a Property
--
-
- A Property in Dative is Just like the data property but the property
- is prefixed with a $ at the beginning
- of the property
-
- Dative v2-alpha now provide a new option and global method for - defining a property -
--
-
defineProperty(name: string, callback: ()=> any): void-
import { defineProperty } from 'dativejs';
-defineProperty('foo', function(){
- return 'bar'
-})-
-
interface property {
- [x:string]: Function
-}-
import Dative from 'dativejs';
-new Dative({
- ...,
- property: {
- foo: function() {
- return 'bar'
- }
- }
-})-
- Why Two Ways of defining Property? -
-- The Reason of the having two ways is that one is accessable - everywhere (globally) in Your application and the other one is - scoped to only a particular instance -
-Question
-Answer
-1. Global method is global (already mentioned by the name)
-2. Options is Scoped to the instance it's created in
--
How to Access the Property in the template
-
-
-
<div>
- <h1>{\{$foo}}</h1>
-</div>-
Plugin DativeJs
-
-
-
-
-
-
-
-
-
-
- Add some global methods or properties. eg -
- @dativejs/helpers
-
-
-
-
-
-
-
-
-
-
-
- -
- - -
- -
-
- Dative v2-alpha plugin are quiet similar
-But the difference is the way of appying it
-The Global Function
--
Dative.use(plugin: DativePlugin): { install(Dative: Dative) }-
The Function Has Been deprecated
-So we added a new option and instance method
-1. Option
--
new Dative({
- ...,
- use: [function({ instance, proto, Dative }: { instance: this, proto: Dative.prototype, Dative: Dative }){
- ...
- }]
-})2. Instance Method
--
var app = new Dative({...})
-app.use(function({ instance, proto, Dative }: { instance: this, proto: Dative.prototype, Dative: Dative }){
- ...
-})-
- What's Plugin Used For -
--
-
-
- Plugins usually add global-level functionality to Dative. There is - no strictly defined scoped for a plugin - there are typically - several types of plugins you can write: -
-
- A Dative.js plugin can expose an
- install
- method or without. The method will be called with a deconstructed
- params with three options,
- { instance, proto, Dative }
-
var MyPlugin = function({ instance, proto, Dative }){
-// Dative=> the Dative constructor
-// instance=> the current instance of your application
-// proto=> the Dative prototype
-
-// 1. Let's make a global property
-Dative.defineProperty('appName',function(){
- return 'Dative News'
-})
-}-
Using a Plugin
-1. Option
--
new Dative({
- ...,
- use: [MyPlugin]
-})2. Instance Method
--
var app = new Dative({...})
-app.use(MyPlugin)
- -
Question
-- You may ask question like "Why is there two ways for using plugins"? -
-Answer
-- First, Dative templates are scoped and not exposed before mounted, - So for developer's making plugins that are to access the template, - the developers are to use the instance method access it -
--
- Second, Variaty which means a developer may like the options way and - hate the instance method way and others may be vice-versa -
--
Creating A Plugin for Global Usuage
-File Structure
-
- my-plugin
- -- dist
- -- my-plugin.esm.js // Es Module
- -- my-plugin.cjs.js // Common Js
- -- my-plugin.js // iife
- -- src
- -- index.js
- -- test
- --index.test.js
- -- index.mjs // Es Module
- -- index.js // Common js
- -- types // not compulsory (for typings)
- -- rollup.config.js // bundler file
- -- readme.md
- --package.json
--
package.json
-
- {{"Note".toUpperCase()}}
-Your plugin name must be prefixed with
-@dativejs . Example-
-@dativejs/my-plugin -
- -
{
- "name": "@dativejs/<your-plugin-name>",
- "version": "1.0.0",
- "description": "<your-plugin-description>",
- "main": "dist/<your-plugin-name>.cjs.js",
- "module": "dist/<your-plugin-name>.esm.js",
- "types": "src/<your-plugin-name>.d.ts",
- "unpkg": "dist/<your-plugin-name>.js",
- "jsdelivr": "dist/<your-plugin-name>.js",
- "files": [
- "index.js",
- "index.mjs",
- "dist",
- "types",
- "rollup.config.js",
- "src",
- "readme.md"
- ],
- "scripts": {
- "build": "rollup -c"
- },
- "exports": {
- ".": {
- "import": {
- "node": "./index.mjs",
- "default": "./dist/<your-plugin-name>.esm.js"
- },
- "require": "./index.js"
- },
- "./package.json": "./package.json"
- },
- "buildOptions": {
- "name": "<your-plugin-name>",
- "formats": [
- "esm-bundler",
- "cjs",
- "global"
- ]
- },
- "repository": {
- "type": "git",
- "url": "git+https://github.com/<yourusername>/<your-plugin-name>.git"
- },
- "keywords": [
- "<your-plugin-name>",
- "Dativejs"
- ],
- "author": "Your Name",
- "license": "<Your License>",
- "bugs": {
- "url": "https://github.com/<yourusername>/<your-plugin-name>/issues"
- },
- "homepage": "<YOUR_HOMEPAGE>"
-}- - -
- {{"Note".toUpperCase()}}
-Your plugin Should be Upload To dative plugins github repo
-- Click Here -
-
- -
-
Official Plugins For DativeJs
-- Click Here -
--
-
Debug
-
-
-
-
-
-
-
-
-
- The debug expression is uses to log a code in the browser and the
- special thing it does is that it adds a
-
-
{\{@debug variable}}-
-- Note: the
-debug accepts object - property only.
- That meansstring , -arrays ,function will not - work -
-
{\{@debug 'hi'}}
-{\{@debug ['hu']}}
-{\{@debug ()=> 'hi'}}
-// all these will not work-
The debug expression also accepts multiple params seperated by a comma
-
{\{@debug variable1,variable2,variable3}}-
With block
-
-
-
-
-
-
-
-
- What is the
-
-
-
-
-
The with block extends the scope chain for a statement
--
- The With block is same as the with statement in - javascript -
- -Syntax
--
{\{#with expression}}
- statement
-{\{/with}}-
In Vanilla Javascript
-with (expression){
- statement
-}-
-
-
- What is the with block used for?
-
- -
- The
- It adds the given object to the head of this scope chain during the
- evaluation of it's body. If an unqualified name used in the body
- matches a property in the scope chain, then the name is bound to the
- property and the object containing the property. Otherwise a
-
- ReferenceError
-
- is thrown
-
-
Example
-
- The following
- The blocks following the
-
{\{$: r = 10;}}
-{\{#with Math}}
- <h1>{\{PI * r * r}}</h1>
- <h1>{\{PI * cos(PI)}}</h1>
- <h1>{\{PI * sin(r * r)}}</h1>
-{\{/with}}-
-
Directives
-
-
- Event Directives
--
import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- count: 0
- }),
- template: '#template'
-});-
<div>
- <h1>{\{count}}</h1>
- <button dv-on:click="count+=1">Increment</button>
-</div>-
Using the methods options
--
import Dative from 'dativejs';
-var app = new Dative({
- el: '#app',
- data: ()=>({
- count: 0
- }),
- methods:{
- add(){
- this.count++
- }
- },
- template: '#template'
-});-
<div>
- <h1>{\{count}}</h1>
- <button dv-on:click="add()">Increment</button>
-</div>-
-
-
-
- Animate Directives
--
<div>
- <h1 animate:bounce="1000,50">Bounce</h1>
-</div>-
-- Note: The animate directives is on experimental mode, So it - doesn't work that well -
-
- Learn More About Animate Directive -
Define Api
-
-
-
-
-
-
- The define api is a new way to create a dative instance and - also a shorter way -
-The define api has two methods:
-
- defineApp
- defineProperty
-
- The first methods is to create the dative instance
-Example:
-With the new function defineApp
--
function defineApp(options: any): Dative-
You don't need to call the new keyword
-import { defineApp } from 'dativejs';
-
-var app = defineApp({
- el: "#app",
- template: ""
-})-
-
-
- Commenting -
-
-
-
-
-
-
-
-
DativeJS v2-alpha has a new way for commenting now
-There are two ways:
--
-
- Html Comment -
- Dative Comment -
-
1. Html Comment
-- The Html Comment is the normal comment you use everyday with html. - That's the: -
--
<!-- this is html comment -->-
- The Html Comment is been rendered to the Dom and dative sees it as a - normal tag. That's the dative interpolation's will be parsed in the - html comment and will give error if it finds a variable thats not - registered in the dative instance -
--
2. Dative Comment
-- The Dative Comment is quiet different from the normal comment,but if - you coming from hbs(handlebars/mustache) You Can Understand the - dative comment. That's the: -
--
{\{!this is dative comment}}-
- The Dative Comment is not been rendered to the Dom and dative doesn't sees it as a - normal tag but as a comment. That's the dative interpolation's will not be parsed in the - html comment and will not give error if it finds a variable thats not - registered in the dative instance -
--
Variable
-
-
-
-
-
-
-
-
-
-
-
- Variable in Dativejs uses the js label syntax
-
<!-- svelte -->
-<script>
- $: app = 'yes'
-</script>
-
-<h1>{app}</h1>-
- The variable in dativejs is quiet the same with sveltejs but the
- different in it is that dativejs variable are in-between the
- expression
-
{\{$: foo = ()=> 'bar';}} {\{! as a function }}
-{\{$: foo = 'bar';}} {\{! as a string}}
-{\{!literally the variable can accept anything the normal js variable can accept}}-
What is the variable Used for?
-
- The Variable is used to store local properties inside your template
- only without having to the the template file.
- It works like the computed property.
-
-- Learn More About Computed Property- Note: The variable block uses
-let under the hood -
-
Example
--
-
-
{\{$: names = ['Foo','Bar'];}}
-<div>
- <ul>
- {\{#each names as name}}
- <li>{\{name}}</li>
- {\{/each}}
- </ul>
-</div>-
- Note: Do Not Use This in an application that requires - reactivity because it's not reactive. --
-
-
-
-
-
-
-
-
-
- Animation
-We've Introduced the
What is the Animate options used For ??
-
- The
- Then You Might Be Like.
- How Can I Use It
-
--{{"Note".toUpperCase()}}: DativeJs animate Api Uses the Web Animation Api
-
Usage:
-import {defineApp} from 'dativejs';
-
- var app = defineApp({
- el: '#app',
- template: `
- <div>
- <h1>Hola!!</h1>
- </div>
- `,
- animate: {
- flash: function({animate,duration,delay}) {
- animate([
- {
- opacity: 1
- },
- {
- opacity: 0
- },
- ],{
- duration,
- delay,
- easing: "linear",
- })
- }
- }
- })-
Using in the template
--
...,
-template:`
-<div>
- <h1 animate:flash="3000,50">Hola!!</h1>
-</div>
-`-
How to Understand the Animate Directives
-
<h1 animate:flash="<duration>,<delay>">Hola!!</h1>-
import {defineApp} from 'dativejs';
-
- var app = defineApp({
- el: '#app',
- template: `
- <div>
- <h1>Hola!!</h1>
- </div>
- `,
- animate: {
- flash: function({animate,duration,delay}) {
- // animate is an alias to the current element.animate
- // duration comes from the directive
- // delay also comes from the directive
- }
- }
- })Short Way Form For the Animate directives is
The parameter in each animation receive 4 options
--
type Animate = {
- animate: (keyframes: Keyframe[] | PropertyIndexedKeyframes, options?: number | KeyframeAnimationOptions)=> Animation,
- duration: number,
- delay: number,
- setStyle: (options: CSSStyleDeclaration)=> void
-}
-
-type DativeAnimateOptions = {
- [x:string]: function({ animate,duration,delay, setStyle }: Animate) => void
-}
- DativeJS Animation Api Doesn't have much Animations So We Introduced
-
- Last Modified: {{transformer(Date.now())}} -
-
-
-
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d9c35f3..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,244 +0,0 @@
-import Dative from "dativejs";
-import { connect } from "dytejs";
-import helper from "@dativejs/helpers";
-import Prism from "prismjs";
-import "prismjs/plugins/toolbar/prism-toolbar";
-import "prismjs/plugins/treeview/prism-treeview";
-// import 'prismjs/plugins/show-language/prism-show-language'
-import "prismjs/components/prism-json";
-import "prismjs/components/prism-jsx";
-import "prismjs/components/prism-typescript";
-import "prismjs/components/prism-tsx";
-import "prismjs/components/prism-bash";
-import "prismjs/components/prism-js-extras";
-import "prismjs/components/prism-js-templates";
-import "@fortawesome/fontawesome-free/js/all";
-import store from "../src/stores";
-import { slidein, slideright, fadein } from "./animations";
-import { SideBar } from "./sidebar/sidebar.dative";
-import { NavBar } from "./navbar/navbar.dative";
-import { Footer } from "./footer/footer.dative";
-import { Ads } from "./ads/ads.dative";
-import Home from "./home/home.dative.html";
-import Teams from "./teams/teams.dative.html";
-import Api from "./api/api.dative.html";
-import Guide from "./guide/guide.dative.html";
-import Migration from "./migration/migration.dative.html";
-import logo from "../public/logo.png";
-import "../public/output.css";
-import "../assets/css/prism.css";
-import "../assets/css/style.css";
-import "@fortawesome/fontawesome-free/css/all.css";
-import "prismjs/plugins/treeview/prism-treeview.css";
-
-let sidebar, navbar, footer;
-
-let app = new Dative({
- el: "#app",
- onmounted() {
- setTimeout(() => Prism.highlightAll(), 0);
- },
- data: () => ({
- name: "Dativejs",
- head_list: ["Home", "Github"],
- dark: "(prefers-color-scheme: dark)",
- }),
- use: [store, helper],
- animate: {
- slideright,
- slidein,
- fadein,
- },
- template:
- location.pathname === "/" || location.pathname === "/index.html"
- ? Home
- : location.pathname === "/teams" ||
- location.pathname === "/teams/index.html"
- ? Teams
- : location.pathname === "/api" || location.pathname === "/api/index.html"
- ? Api
- : location.pathname === "/guide" ||
- location.pathname === "/guide/index.html"
- ? Guide
- : location.pathname === "/migration" ||
- location.pathname === "/migration/index.html"
- ? Migration
- : 404,
- methods: {
- /**
- * @param timestamp timestamp for the date
- */
- transformer: (timestamp) => {
- const date = new Date(timestamp);
- const digits = [
- date.getFullYear(),
- date.getMonth() + 1,
- date.getDate(),
- date.getHours(),
- date.getMinutes(),
- date.getSeconds(),
- ].map((num) => String(num).padStart(1, 1));
- return "{0}-{1}-{2}, {3}:{4}:{5}".replace(
- /{(\d)}/g,
- (_, num) => digits[num]
- );
- }
- }
-});
-// app.use(store)
-connect()(app);
-window.app = app;
-
-if (document.querySelector("#sidebar")) {
- sidebar = new SideBar({
- el: "#sidebar",
- props: {
- sidebar: [
- {
- title: "Guide",
- path: "/guide/index.html",
- children: [
- {
- title: "Introduction",
- path: "/guide/index.html",
- },
- {
- title: "Installation",
- path: "/guide/index.html#installation",
- },
- {
- title: "Data and Methods",
- path: "/guide/index.html#data-and-methods",
- },
- {
- title: "Computed",
- path: "/guide/index.html#computed",
- },
- {
- title: "#if",
- path: "/guide/index.html#conditional-rendering",
- },
- {
- title: "#each",
- path: "/guide/index.html#for-loop",
- },
- {
- title: "Extend",
- path: "/guide/index.html#extend",
- },
- {
- title: "Event",
- path: "/guide/index.html#event",
- },
- {
- title: "Property",
- path: "/guide/index.html#property",
- },
- {
- title: "Plugin",
- path: "/guide/index.html#plugin",
- },
- {
- title: "@debug",
- path: "/guide/index.html#debug",
- },
- {
- title: "#with",
- path: "/guide/index.html#with",
- },
- {
- title: "Directives",
- path: "/guide/index.html#directives",
- },
- {
- title: "define Api",
- path: "/guide/index.html#define-api",
- },
- {
- title: "Comment",
- path: "/guide/index.html#comment",
- },
- {
- title: "Variable",
- path: "/guide/index.html#variable",
- },
- {
- title: "Animations",
- path: "/guide/index.html#animation",
- },
- ],
- },
- {
- title: "Api",
- path: "/api/index.html",
- },
- {
- title: "Teams",
- path: "/teams/index.html",
- },
- {
- title: "Migration",
- path: "/migration/index.html",
- },
- ],
- },
- attach: app,
- });
-}
-
-if (document.querySelector("#navbar")) {
- navbar = new NavBar({
- el: "#navbar",
- attach: app,
- props: {
- logo: logo,
- icons: [
- { name: "github", link: "https://github.com/dativeJs/dativejs" },
- { name: "twitter", link: "https://twitter.com/dativejs" },
- ],
- toggleSidebar() {
- var navi = sidebar.$ref.navbar;
- if (navi.style.width === "0px") navi.style.width = "50%";
- else navi.style.width = "0px";
- },
- },
- });
-}
-
-if (document.querySelector("#footer")) {
- footer = new Footer({
- el: "#footer",
- attach: app,
- props: {
- /**
- * @param timestamp timestamp for the date
- */
- transformer: (timestamp) => {
- const date = new Date(timestamp);
- const digits = [
- date.getFullYear(),
- date.getMonth() + 1,
- date.getDate(),
- date.getHours(),
- date.getMinutes(),
- date.getSeconds(),
- ].map((num) => String(num).padStart(1, 1));
- return "{0}-{1}-{2}, {3}:{4}:{5}".replace(
- /{(\d)}/g,
- (_, num) => digits[num]
- );
- },
- },
- });
-}
-
-if (document.querySelector("#ads")) {
- new Ads({
- target: "#ads",
- attach: app,
- });
-}
-
-if ("serviceWorker" in navigator) {
- navigator.serviceWorker.register("/sw.js");
-}
diff --git a/src/migration/migration.dative.html b/src/migration/migration.dative.html
deleted file mode 100644
index e2a73e6..0000000
--- a/src/migration/migration.dative.html
+++ /dev/null
@@ -1,185 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- -
- {{ $store.getters.uppercaseTitle }} -
--
-
-
- - A Modern UI JavaScript framework -
--
-
-
-
-
-
-
-
- With new features
-- Dative v2-alpha has been re-architected with more tools for better - developer experience. -
-
- {{#each $store.icons as icons}}
-
-
-
- {{#if icons.icon !== 'svg'}}
-
- {{:else}} -
- {{/each}}
-
-
-
- - {{:else}} -
{{icons.svg}}
- {{/if}} -{{icons.title}}
-{{icons.descriptions}}
--
-
-
-
-
\ No newline at end of file
diff --git a/src/navbar/navbar.dative.html b/src/navbar/navbar.dative.html
deleted file mode 100644
index 93b2b5f..0000000
--- a/src/navbar/navbar.dative.html
+++ /dev/null
@@ -1,60 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- Migration Guide
--
- If I Upgrade to Dative 2-alpha, will i also have to upgrade Dyte? --
-
- Yes, Because the version 1 of dyte is not compatible with the Dative
- 2-alpha
So You'll Have To Follow the
- migration path for Dyte
-
-
Templates
--
-
-
- Fragment Instances
- removed
-
-
-
-
-
- -
- Every instance must have exactly one root element.
Fragment
- instances are no longer allowed. if you have a template like this:
-
<p>bar</p>
-<p>foo</p>-
- It's Recommend to wrap the entire contents in a new element, like this: -
--
<div>
- <p>bar</p>
- <p>foo</p>
-</div>-
-
-
- Upgrade Path-
-- Run your end-to-end test suite or app after upgrading and look for - console warnings about multiple root elements in a template -
-
- -
Lifecycle Hooks
--
-
- created
- replaced
-
-mounted
- replaced
-
-update
- removed
-
- -
Use the
-
-
Use the
-
-
Directives
--
-
- dv-html
- removed
-dv-text
- removed
-dv-if
- removed
-
-:class
- removed
-
-dv-show
- removed
-dv-on
- removed
-
-:style
- removed
-
-on:
- readded
-
-dv-on:
- changed
-
-dv-bind:
- changed
-
-:<attribute>
- removed
-
-@<eventname>
- changed
-
-
-
-
Use the
{\{#if condition}}
- do something here
-{\{/if}}-
- Use the native class attribute with some mustache expressions -
-<div class="{\{show ? 'show' : 'hide' }}"></div>-
-
Use the
<div dv-on:click="one()"></div>-
- Use the native style attribute with some mustache expressions -
-<div style="background: {\{warning ? 'yellow' : 'green' }}"></div>-
<div on:click="one()"></div>-
- With the dv-on: directives funtions from the methods should have the
-
<div dv-on:click="one()"></div>-
You can use the short way also like this:
-<div bind:title="title"></div>-
Use either bind or dv-bind
--
It's now used with the animation api
-<div @bounce="4000,50">I'm Bouncing</div>-
-
Last Modified: {{transformer(Date.now())}}
-
-
-
-
diff --git a/src/navbar/navbar.dative.js b/src/navbar/navbar.dative.js
deleted file mode 100644
index 60e32e7..0000000
--- a/src/navbar/navbar.dative.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Dative from "dativejs";
-import { swing } from "dativejs/animation";
-import template from "./navbar.dative.html";
-
-export let NavBar = Dative.extend({
- template,
- props: {
- logo: String,
- icons: Array,
- toggleSidebar: Function,
- },
- animate: {
- swing,
- },
-});
\ No newline at end of file
diff --git a/src/sidebar/sidebar.dative.html b/src/sidebar/sidebar.dative.html
deleted file mode 100644
index 2ca9a22..0000000
--- a/src/sidebar/sidebar.dative.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
diff --git a/src/sidebar/sidebar.dative.js b/src/sidebar/sidebar.dative.js
deleted file mode 100644
index 8dc1982..0000000
--- a/src/sidebar/sidebar.dative.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Dative from "dativejs";
-import template from "./sidebar.dative.html";
-
-export let SideBar = Dative.extend({
- template,
- props: {
- sidebar: Object,
- },
-});
diff --git a/src/stores/icons.store.js b/src/stores/icons.store.js
deleted file mode 100644
index 6761684..0000000
--- a/src/stores/icons.store.js
+++ /dev/null
@@ -1,58 +0,0 @@
-export let icons = [
- {
- icon: "svg",
- title: "Dative Cli
-
-
-
- -
diff --git a/src/teams/teams.dative.js b/src/teams/teams.dative.js
deleted file mode 100644
index bc1cc30..0000000
--- a/src/teams/teams.dative.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Dative from "../../packages/dative";
-import template from "./teams.dative.html";
-
-export let Teams = Dative.extend({
- template
-});
-
-
-
-
- Core Teams
--
- {{#each $store.teams as i,team}} {{$: duration = 2000*(Number(i)+3);}}
-
-
-
- {{/each}}
-
- 
-
-
-
-
- - -