youview README

With many types of development, folks must edit multiple files in order to implement a feature. This concept is an intersection of single responsibility and component-based engineering. Youview is an extension that opens your files, to let you view them at once. Whether you want to edit all the files, or some subset, for your component, youview works.

Features

YouView lets you open all the files you like in order to code up your component more quickly/easily.

Requirements

Idk - vscode? None otherwise (I don't think)

Extension Settings

This extension contributes the following settings:

• youview.activeMatchers: An array of matcher {implementation} names that indicate which kinds of files to auto-open
  • TODO: this is only implemented in configuration, not in code. Implement it in code.
• youview.matchers: Each key configures a) how files are matched and b) how they are split into a view
  • {implementation} (eg. angular; establishes intention for the matcher)
    • active: boolean
      • determines if the {implementation} matcher is active, and try to match/open files
    • files
      • If a component is a set of files, each key in this object represents an aspect of your component, and each value for each key is a regex that will match that file specifically.
        • For example, here is a definition for an angular component:

        <!-- settings.json --> 
          ...
          "youview.matchers.angular.files": {
        
            "code": ".ts$",
            "markup": ".html$",
            "style": ".scss",
            "test": ".(spec|test).ts$"
          }
        

        • Files that match the .ts$ regex are "code" files
        • Files that match the .html$ regex are called "markup" files
        • Files that match the .scss$ regex are called "style" files
        • Files that match the .(spec|test).ts$ regex are called "test" files
    • openWith
      • Read files section above first!
      • The value of this must be one of the keys in files
        • For example, if the value of this setting is ["code", "markup" ], YouView will open all matching files when you open/focus your text editor on a code file OR a markup file.
        • Another example: if the value of this setting is just ["code"], YouView will only open matching files when you open/focus your text editor code files

Known Issues

• There are no tests
• There is no cicd/build scenario in place
• Anywhere you see todo in the repo, something could be considered/changed/done

Release Notes

0.0.1

Initial beta release of YouView.

Following extension guidelines

TODO: read this section and document

Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.

• Extension Guidelines

Contributing

Running the project

• Clone repo
• npm i
  • install dependencies
• F5 / Run Extension
  • Opens a new vscode shell with your extension running
    • Within the new vscode instance, open a project as you normally would and do stuff
    • The vs-code-ext/samples has sample components of various kinds for dev purposes

Implementing a component

• package.json:activationEvents lists activation events for the YouView extension
  • These entries tell vscode to
  • If the language(s) of any of the files in the component you want to add are not listed there, add it
    • For example, these are all needed to support frontend (eg. angular, react, etc)

        "onLanguage:html",
        "onLanguage:css",
        "onLanguage:less",
        "onLanguage:scss",
        "onLanguage:sass",
        "onLanguage:typescript"
      

• package.json:contributes:configuration contains configuration for the extension, which users can change/edit as settings
  • You should recreate as a new implementation for your component (angular is an example of matcher configuration)

Background

• When YouView is activated:
  • file cache is created
    • file cache is used to store files that are opened as part of a group (aka a component)
  • events are listened to PER LANGUAGE*
    • onDidOpenTextDocument
      • When documents are opened, this callback is fired
      • This callback is used to determine if a file that is being opened is a component file the user cares about
        • Support for components comes from settings and matcher implementation
      • if a textDocument (being opened) is a component-opening document
        • the matcher finds the appropriate component files
        • the matcher orders the files according to the user's configuration
        • the file set is stored in cache
          • All files are cached by filepath
          • The file/files that activated youview are denoted appropriately via wasActivator property
    • onDidCloseTextDocument
      • When documents are closed, this callback is fired
      • This callback is used to determine if a file that is being closed is a component file youview has opened previously as part of a component
      • If a textDocument (being closed) has the wasActivator property, all associated files are purged from cache so that when the file is opened again, youview is triggered anew, HOWEVER
        • other files in component file set will remain in text editor as-is, untouched
          • Thus, when the youview activator file is re-opened, so will the other component files be, which may present those files in multiple tabs, leaving reconciliation and cleanup to the user to determine. At some point, we may support an all-open/all-close scenario by saving and auto-close affiliated files when an activator file is opened/closed.
      • If a textDocument (being closed) does not have the wasActivator designation, don't care
        • don't care because