Skip to main content
Module

x/vno/strategies/README.md

a build tool for compiling and bundling Vue single-file components
Go to Latest
File

STRATEGIES

components.ts

  • This file defines the constructor function for instantiating each individual component.

RunData Method

  • When we create a new component, this is run immediately and collects the whole file as a string, and breaks up the file into an array on every new line.
  • Each of these components is saved on the global storage

sibling.ts

  • Defines the data structure for the relationship between chidren of the same parent component

Add Method

  • Establish the location of the current component in the sibling list

Scrub Method

  • Removes repeat instances of components from the bottom to the top until the final instance of the component is written.

INITIALIZE

Base is the constructor function

Initialize is a collection of all the methods that do cool stuff

Initialize.config

  • The argument is an object that has 2 required properties
    • Entry
    • Root
  • Third optional argument
    • CDN
  • Config calls walk
  • Config instantiates parser and constructs it with a possible vue argument. If there is no vue argument, it defaults to null, which our parser will default to the default cdn defined in parser.

Initialize.walk

  • Makes use of the Deno walk method
  • Looks for every file component with a .vue extension and we save the name of the file in a constant we create a new component for each vue file.
  • After we instantiate these components, they are saved into global object called storage.

PARSER

  • Has one required argument (this.root), and one optional argument (this.vue) which defines the CDN.

The Utils Folder

  • Each function called in the parser.parse method has been defined in it’s own file in the utils folder.

Parser.parse

  • Enters a loop (comparable to a BST breadth-first-search) that while the queue (imported from the utils.ts file) has length, we parse through the first index of our queue to seperate the HTML, Javascript, and CSS from each Vue component.

Parse Template

  • Iterates through the split property on the current component which is the array of data that has been broken up by each “\n”. It looks for the tag, saves the date in between the two tags a string onto the current component object’s template property.
  • We replace the value of the split to remove the data that has already been parsed

Parse Script

  • Iterates through the new, more concised split property on the current component. This time looking for the