npm - vaderjs - Versions diffs - 1.2.6 → 1.2.8 - Mend

vaderjs 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/.vscode/vaderjs.autosense.json +1 -1
package/index.js +1 -1
package/package.json +1 -1
package/readme.md +32 -7
package/snippet-gen/vader/.vscode/launch.json +17 -0
package/snippet-gen/vader/.vscodeignore +4 -0
package/snippet-gen/vader/CHANGELOG.md +9 -0
package/snippet-gen/vader/README.md +26 -0
package/snippet-gen/vader/extension/extension.js +70 -0
package/snippet-gen/vader/extension/html_completion/html_completion.js +91 -0
package/snippet-gen/vader/extension/html_completion/html_completion.json +1891 -0
package/snippet-gen/vader/icons/logo.png +0 -0
package/snippet-gen/vader/language-configuration.json +128 -0
package/snippet-gen/vader/package.json +47 -0
package/snippet-gen/vader/snippets/vader.json +13 -0
package/snippet-gen/vader/syntaxes/vader.tmLanguage.json +2644 -0
package/vader.js +253 -152
package/worker.js +106 -0

package/.vscode/vaderjs.autosense.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
       "className":{
+         "name":"className"
       }
 }

package/index.js CHANGED Viewed

@@ -4,7 +4,7 @@
  * @version 1.1.5
  *
  */
-import Vader, { include, useRef } from './vader.js';
+import Vader, { include} from './vader.js';
 // @ts-ignore
 import VaderRouter from './vaderRouter.js';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vaderjs",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "A Reactive Framework for Single-Page Applications (SPA)",
   "main": "index.js",
   "scripts": {

package/readme.md CHANGED Viewed

@@ -62,6 +62,23 @@ or
   ```
 ## Key Features
+### Client Fly Rendering
+Vaderjs allows you to render your components & manipulate worker side vs main thread. This allows for faster page speeds and better user experience.
+```javascript
+import Vader from "vaderjs";
+class Home extends Vader.Component {
+  constructor() {
+    super();
+    this.cfr = true; // enable client fly rendering -  this is optionals
+  }
+  render() {
+    return this.html(`<div>Hello World</div>`);
+  }
+}
+```
 ### Declarative Routing
 ```javascript
@@ -202,13 +219,21 @@ export class App extends Vader.Component{
 As of v1.1.0 - Vader allows you to include html files as templates
 ```html
-// views/app.html
+// views/app.vjs
+<body>
+  <div>Hello World</div>
+  <h1>{{title}}</h1>
+  <slot id="app" />
+</body>
+```
+```html
+// pages/app.html
+<include src="views/app.vjs"/>
+<body>
+<app tittle="this is a component">
+  <div> this is apps children! </div>
+</app>
-<div>
-${
- window.location.hash === "#/home" ? "Home page" : "Not on the Home Page"
-}
-</div>
 ```
 ```js
@@ -220,7 +245,7 @@ class Home extends Vader.Component {
     super();
   }
   render() {
-    return this.html(include("views/app.html"));
+    return this.html(include("pages/app.html"));
   }
 }

package/snippet-gen/vader/.vscode/launch.json ADDED Viewed

@@ -0,0 +1,17 @@
+// A launch configuration that launches the extension inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Extension",
+            "type": "extensionHost",
+            "request": "launch",
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ]
+        }
+    ]
+}

package/snippet-gen/vader/.vscodeignore ADDED Viewed

@@ -0,0 +1,4 @@
+.vscode/**
+.vscode-test/**
+.gitignore
+vsc-extension-quickstart.md

package/snippet-gen/vader/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,9 @@
+# Change Log
+All notable changes to the "vader" extension will be documented in this file.
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+## [Unreleased]
+- Initial release

package/snippet-gen/vader/README.md ADDED Viewed

@@ -0,0 +1,26 @@
+# vader README
+## Features
+HTML syntax highlighting for vader files & intellisense / autocomplete for html elements and vader.js methods
+Shows deprecated methods as deprecated in the intellisense - and shows suggestions for alternatives
+## Requirements
+Common knowlege of HTML and vader.js!
+## Known Issues
+## Release Notes
+Users appreciate release notes as you update your extension.
+### 1.0.0
+Initial release of vader

package/snippet-gen/vader/extension/extension.js ADDED Viewed

@@ -0,0 +1,70 @@
+const vscode = require('vscode');
+const html_completes = require('./html_completion/html_completion');
+function activate(context) {
+  let completes = []
+  const include = vscode.languages.registerCompletionItemProvider(
+    'vader',
+    {
+      provideCompletionItems(document, position) {
+        const linePrefix =  document.lineAt(position).text.trim();
+        if(!linePrefix.startsWith('in')) {
+          return undefined;
+        }
+        let complete = new vscode.CompletionItem('include()', vscode.CompletionItemKind.Function);
+        complete.insertText = new vscode.SnippetString('include("${1:file}")');
+        complete.tags = [vscode.CompletionItemTag.Deprecated]
+        complete.documentation = new vscode.MarkdownString(`Include a view file into your template\n - @param \`\string\`\ file - The file to include\n- @returns {string} - the parsed html code to client`, true)
+        return [complete]
+      }
+    },
+  )
+  const comment = vscode.languages.registerCompletionItemProvider('vader', {
+    provideCompletionItems(document, position) {
+      const linePrefix = document.lineAt(position).text.slice(0, position.character);
+      if(!linePrefix.includes('-')) {
+        return undefined;
+      }
+      let complete = new vscode.CompletionItem('-', vscode.CompletionItemKind.Property);
+      complete.insertText = new vscode.SnippetString('-- \n ${1:comment} \n--');
+      complete.documentation = new vscode.MarkdownString(`Create a multi line comment`, true)
+      return [complete]
+    },
+  }, )
+  const syntaxeror = vscode.languages.registerCompletionItemProvider('vader', {
+    provideCompletionItems(document, position) {
+      let firstline = document.lineAt(0).text.trim();
+      let lastline = document.lineAt(document.lineCount - 1).text.trim();
+      if(!firstline.includes('body') || !lastline.includes('body')) {
+          vscode.window.showWarningMessage('Syntax error: missing <body> tag in template\n vader may cut off your code if not present')
+          return undefined;
+      }
+    },
+  })
+  const includehover = vscode.languages.registerHoverProvider('vader', {
+    provideHover(document, position) {
+      const linePrefix = document.lineAt(position).text.slice(0, position.character);
+      if (!linePrefix.startsWith('in')) {
+        return undefined;
+      }
+      let complete = new vscode.Hover(new vscode.MarkdownString(`Include a view file into your template\n - @param {string} file - The file to include\n- @returns {string} - the parsed html code to client`, true))
+      return  complete
+    }
+  })
+  context.subscriptions.push(include,  html_completes, comment, includehover, syntaxeror,completes);
+}
+module.exports.activate = activate;

package/snippet-gen/vader/extension/html_completion/html_completion.js ADDED Viewed

@@ -0,0 +1,91 @@
+const vscode = require('vscode');
+let  completes = []
+const html_completes =  vscode.languages.registerCompletionItemProvider('vader', {
+    provideCompletionItems(document, position) {
+         let line =  document.lineAt(position).text.trim();
+         let {tags, attributes} = JSON.parse(require('fs').readFileSync(require('path').join(__dirname, 'html_completion.json'), 'utf8'))
+         let items = []
+            for(tag in tags){
+                if(!line.startsWith('<') && !line.endsWith('>')){
+                    continue
+                }
+                let complete = new vscode.CompletionItem(tag, tags[tag].type && tags[tag].type === "keyword" ? vscode.CompletionItemKind.Keyword : vscode.CompletionItemKind.Module);
+               // make sure its not in range between a entering < and closing > with a space in between
+                if(line.startsWith('<') && line.endsWith('>') && line.includes(' ')){
+                    // remove the tag from the completion
+                    let line = document.lineAt(position).text.trim();
+                    complete.range = new vscode.Range(new vscode.Position(position.line, line.indexOf('<')), new vscode.Position(position.line, line.indexOf('<') + tag.length))
+                }
+                complete.insertText = new vscode.SnippetString(tags[tag].body);
+                if(tags[tag].deprecated){
+                    complete.tags = [vscode.CompletionItemTag.Deprecated]
+                }
+                complete.documentation = new vscode.MarkdownString(tags[tag].description, true)
+                items.push(complete)
+            }
+            for(attribute in attributes){
+                let line = document.lineAt(position).text.trim();
+                if(line.includes('<') || line.includes('>') ){
+                    let tag =  line.split('<')[1] ? line.split('<')[1].split('>')[0].split(' ')[0] : line.split('>')[0]
+                    let valid_in = attributes[attribute].valid_in
+                    if(valid_in.includes(tag) || valid_in.includes('*')){
+                        let complete = new vscode.CompletionItem(attribute, vscode.CompletionItemKind.Property);
+                        if(attributes[attribute].deprecated){
+                            complete.tags = [vscode.CompletionItemTag.Deprecated]
+                        }
+                        complete.insertText = new vscode.SnippetString(attributes[attribute].body);
+                        complete.documentation = new vscode.MarkdownString(attributes[attribute].description, true)
+                        items.push(complete)
+                    }
+                }
+            }
+          return items
+    },
+} , )
+const hovercompletes = vscode.languages.registerHoverProvider('vader', {
+    provideHover(document, position) {
+        let selection = document.getText(document.getWordRangeAtPosition(position));
+        let  {tags, attributes} = JSON.parse(require('fs').readFileSync(require('path').join(__dirname, 'html_completion.json'), 'utf8'))
+        let line = document.lineAt(position.line).text.trim();
+        // make sure no attributes are in the hover position
+        if (selection === line.split('<')[1].split('>')[0].split(' ')[0]) {
+            let tag = line.split('<')[1].split('>')[0].split(' ')[0]
+            if (tags[tag]) {
+                return new vscode.Hover(new vscode.MarkdownString(tags[tag].description, true))
+            }
+        }
+        // get the parent tag
+        let parent_tag = line.split('<')[1].split('>')[0].split(' ')[0]
+        // get the attribute
+        let tag_attributes = line.split('<')[1].split('>')[0].split(' ')
+        for (let i = 0; i < tag_attributes.length; i++) {
+            let attribute = tag_attributes[i]
+            if (attribute.includes('=')) {
+                attribute = attribute.split('=')[0]
+            }
+            if (attribute === selection) {
+                if (attributes[attribute]) {
+                    return new vscode.Hover(new vscode.MarkdownString(attributes[attribute].description, true))
+                }
+            }
+        }
+        return null; // Return null if no matching tag or attribute is found.
+    }
+});
+completes.push(html_completes, hovercompletes)
+module.exports =  completes