code)
+ result = result.replace(/`(.*?)`/g, (match, text) => {
+ return `${text}`;
+ });
+
+ // Convert links (e.g., [Text](URL) => Text)
+ result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
+ return `${text}`;
+ });
+
+ // Convert images (e.g.,  => - Item
- ${line.replace( + /^\s*-\s+(.*?)$/gm, + "$1" + )} ` + ); + } else if ( + index === arr.length - 1 || + !arr[index + 1].match(/^\s*-\s+(.*?)$/gm) + ) { + result = result.replace( + line, + `
- ${line.replace(/^\s*-\s+(.*?)$/gm, "$1")}
- Item
- ${line.replace( + /^\s*\d+\.\s+(.*?)$/gm, + "$1" + )} ` + ); + } else if ( + index === arr.length - 1 || + !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm) + ) { + result = result.replace( + line, + `
- ${line.replace(/^\s*\d+\.\s+(.*?)$/gm, "$1")}
code)
- result = result.replace(/`(.*?)`/g, (match, text) => {
- return `${text}`;
- });
-
- // Convert links (e.g., [Text](URL) => Text)
- result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, text, url) => {
- return `${text}`;
- });
-
- // Convert images (e.g.,  => - Item
- ${line.replace(/^\s*-\s+(.*?)$/gm, '$1')} `); - } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*-\s+(.*?)$/gm)) { - result = result.replace(line, `
- ${line.replace(/^\s*-\s+(.*?)$/gm, '$1')}
- Item
- ${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')} `); - } else if (index === arr.length - 1 || !arr[index + 1].match(/^\s*\d+\.\s+(.*?)$/gm)) { - result = result.replace(line, `
- ${line.replace(/^\s*\d+\.\s+(.*?)$/gm, '$1')}
' + ); - - result = result.replace(/^\s*-\s+(.*?)$/gm, (match, text) => { - return `
Quote) + result = result.replace(/^\s*> (.*)$/gm, (match, text) => { + return `
${text}`; + }); + + // Convert tables (e.g., | Header | Cell | =>
| Header | Cell |
|---|
| ${headerCell} | `; }); - result = result.replace(/^\s*---\s*$/gm, '
|---|
| ${cell} | `; }); + table += "
| Header | Cell |
|---|
| ${headerCell} | `; - }); - table += '
|---|
| ${cell} | `; + if (!result.includes("")) { + throw new Error( + `Vader Error: You must enclose your html in a body tag for all components. \n\n${result}` + ); + } + /** + * @type {string[]} + * @description - grabbing all className attributes and replace them with class + */ + // @ts-ignore + result = result.replace(/classname/g, "class"); + /** + * @type {string[]} + * @description - grabbing all image tags and replace the src attribute with the absolute path + */ + // @ts-ignore + let images = result.match(/
${result}
`,
- js: js ? js : ''
- })
-
- }
\ No newline at end of file
+ }
+
+ postMessage({
+ template: `${result}
`,
+ js: js ? js : ""
+ });
+};
diff --git a/public/images/components.png b/public/images/components.png
new file mode 100644
index 0000000..62c111a
Binary files /dev/null and b/public/images/components.png differ
diff --git a/src/components/nav.vjs b/src/components/nav.vjs
index 0d383b2..9a8fb0b 100644
--- a/src/components/nav.vjs
+++ b/src/components/nav.vjs
@@ -12,7 +12,7 @@ border border-base-200 text-black bg-base-100 ">
${
$FULL_URL.includes("docs")
? "Docs"
- : "Vader.js v1.3.0 "
+ : `Vader.js v1.3.2`
}
@@ -38,8 +38,11 @@ border border-base-200 text-black bg-base-100 ">
-
+
@@ -127,6 +129,40 @@
+ -
+
+
+
+
diff --git a/src/pages/Docs.js b/src/pages/Docs.js
index 5704f9e..8c81f71 100644
--- a/src/pages/Docs.js
+++ b/src/pages/Docs.js
@@ -3,7 +3,7 @@ import Vader,{ include } from "../../dist/vader/vader.js";
export class Docs extends Vader.Component{
constructor(){
super()
- this.cfr = true
+
}
async render(p, asterisk){
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 3d73a8d..7e34b7d 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -4,28 +4,20 @@ export class Home extends Vader.Component {
constructor() {
super();
- this.cfr = true
+ this.cfr = true;
}
async render() {
- let counter = this.signal('count', 0)
-
-
-
- let e = this.$Function((e)=>{
- counter.set(counter.get() + 1);
-
- })
-
let test = await include('/views/home.html')
return await this.html(test)
}
+ // @ts-ignore
componentUpdated(prev_state, prev_props, content){
console.log(prev_state);
}
diff --git a/src/pages/test.js b/src/pages/test.js
new file mode 100644
index 0000000..8b2b4ec
--- /dev/null
+++ b/src/pages/test.js
@@ -0,0 +1,6 @@
+import { component } from "../../dist/vader/vader";
+
+export default function test(children) {
+
+ return c.html(``);
+}
\ No newline at end of file
diff --git a/src/views/doc.html b/src/views/doc.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/docs/base/getting-started.html b/src/views/docs/base/getting-started.html
index 92c96a2..14cb023 100644
--- a/src/views/docs/base/getting-started.html
+++ b/src/views/docs/base/getting-started.html
@@ -3,9 +3,8 @@
- ${
- document.title = "Getting Started | Vader Docs", ""
- }
+ @title 'Getting Started | Vader Docs'
+
@@ -66,12 +65,9 @@
## Try In Your Browser
-
+
-
+
\ No newline at end of file
diff --git a/src/views/docs/basics/project-structure.html b/src/views/docs/basics/project-structure.html
index 3f6a310..c78be26 100644
--- a/src/views/docs/basics/project-structure.html
+++ b/src/views/docs/basics/project-structure.html
@@ -1,6 +1,5 @@
-${
- document.title = "Project Structure | Vader Docs", ""
-}
+@title 'Project Structure | Vader Docs'
+
+
+ Hooks
+
+
+
+
+ Directories
+ - + \ No newline at end of file diff --git a/src/views/docs/basics/views.html b/src/views/docs/basics/views.html index bd8993e..e414d95 100644 --- a/src/views/docs/basics/views.html +++ b/src/views/docs/basics/views.html @@ -1,38 +1,54 @@ -${ - document.title = "Views | Vader Docs", "" -} +@title 'Views | Vader Docs' +
-
-
Views
-- Views are vader components which are used to display content to the user. They help you organize your webapp into different page files, while also allowing you to embed them in one another. - Views use the src/ directory and can be included in other views using the <include/> tag. - Alternatively their is a include() function to include views inside of your top level js files! -
-- There are no limitation to what you write inside of view files most the documentation you have read about vader is written in both html and markdown! - vader transpiles markdown code inside of your html/vjs files. - They also are returned as functions which means you can write js inside using $ { } . -
-Link Between Views
- -- After defining routes to your pages - vader looks for relative links for example /about and /contact are valid links to your pages. - These will be changed to #/about.html and #/contact.html respectively. -
- -
-
- **Note**
-
-
+
+ - You can disable relative paths - using #vader_disable_relative-paths comment at the top of your file. -
-Views
++ Views are vader components which are used to display content to the user. They help you organize your webapp + into different page files, while also allowing you to embed them in one another. + Views use the src/ directory and can be included in + other views using the <include/> tag. + Alternatively their is a include() function to include views inside of + your top level js files! +
++ They offer remarkable flexibility, treating your content consistently whether it's written in Markdown or HTML. Your at no limitation to what you can write or do inside of then! + +
+Creating Views
++ After defining routes to your pages - vader looks for relative links for example /about and /contact are valid links to your pages. + These will be changed to #/about.html and #/contact.html respectively. +
+ ++ Vader uses relative paths because often times it can be hard indexing folders. in a webapp - so vader uses relative paths to both the root public folder and the root src folder. + These two folders are required to be in the root of your project. +
+
+
+ **Note**
+
+
+ + You can disable relative paths - using #vader_disable_relative-paths + comment at the top of your file. +
+Javascript
++ Views have two ways of using js in your project views - we have the inline version ${'`'}