Giter Club home page Giter Club logo

trongate-vscode's Introduction

Trongate-logo

Scaffold & Code Snippets

This is a Visual Studio Code extension to compliment the Trongate ecosystem. Consisting of the Trongate framework and the Desktop-app. All tirelessly written by David Connelly, who I'd like to make special mention here for his continued dedication and commitment in keeping the web development doors open to everyone.

Features

New Trongate Module

A module is an essential building block of the Trongate Framework's HMVC architecture. However, creating a module from scratch is tedious and requires you to constantly concentrate on creating and naming your folders and files correctly. Then typing boilerplate code which becomes repetitive and open to errors. This is where this feature will help speed up the process with precision accuracy to create the module for you.


  • Quick Start
    • Ensure you have opened a Trongate project in your workspace
      • Right click on the modules folder for creating a general module or
      • Alternativly create a sub-module by right clicking on the parent module folder
      • Then select 'New Trongate Module' and give it a module name
    • If you want a view template
      • Then you will need to give it a name for your view file.
        • An example would be 'display'

  • Create a scaffold module on the fly
    • The extension can figure out what you are creating if it is a general module or a sub module, and give you the corresponding code.
    • With a starter class (default option), complete with api.json in the assets folder ready for you to create whatever is on your mind - enjoy!
    • With a view template, it allows you to name your view file and gives you a starter function index to guide you on the road.
    • now with v1.0.1+ you can create a view, complete with module specific linked CSS and JavaScript files
  • Prevent module naming errors
    • The extension will dynamically read your config.php and extract the MODULE_ASSETS_TRIGGER, if you accidentally name your module the same as the MODULE_ASSETS_TRIGGER, the process will terminate and you would be notified. This is a handy feature to avoid a blank screen.

vsc-101-view


Add PHP and custom Trongate code snippets to speed up your development.


Table of helpful Trongate snippets:

Snippet Name Prefix
Trongate For Loop In View File tg:for
Trongate if condition in View File tg:if
Trongate if else in View File tg:ifelse
Trongate Submit Function Scaffold tg:submit
Create new class the extends Trongate tgc
Create new method with or without args tgm, tgm1, tgm2, tgm3
Add an acnchor with url tga
Insert a Template tgt
Add [$data] = '' tgde
Add [$data] = $this-> tgdl
Quick php insert variable tgev
Quick php insert environment variable tge

snippets2


NITRO

A desktop app created by David Connelly originally for Speed Coding Academy members using Sublime Text 3 only but now available to VS Code users.

New to this release:

  • Click on the CSS framework name in the bottom status bar to quickly change frameworks
  • The Trongate CSS has been added and is now the default framework

Features

  • Insert popular frontend CSS frameworks and their elements into your view and template files

Use ctrl+win+alt+/ to bring up the dropdown selector to select your frontend framework


Table of Nitro inserts > Showing the Trongate CSS prefixes below:

Command Shortcut Prefix
Buttons ctrl+win+alt+b tg:t:button
BUttons Alternative ctrl+win+alt+u tg:t:button-alt
Contact Form ctrl+win+alt+c tg:t:contact
Download URL ctrl+win+alt+d tg:t:url
Form ctrl+win+alt+f tg:t:form
Grid ctrl+win+alt+g tg:t:grid
Info Page ctrl+win+alt+i tg:t:info
Login Form ctrl+win+alt+l tg:t:login
Modal ctrl+win+alt+m tg:t:modal
Password Form ctrl+win+alt+p tg:t:password-form
Table ctrl+win+alt+t tg:t:table
TAble Alternative ctrl+win+alt+a tg:t:table-alt
TEmplate ctrl+win+alt+e tg:t:template


PLEASE NOTE: The win key is the same as super in Linux and cmd on Mac

css

Requirements

You will need the Trongate Framework of course! โค๏ธ

Why you should use Trongate Framework?

  • Imagine a PHP framework that allowed you to build large scale enterprise applications in minutes instead of months.
  • Imagine a framework that did NOT get rewritten constantly.
  • Imagine a framework that you could learn once and use for a lifetime.
  • Imagine a framework that was V1 forever!

You've just imagined Trongate

intro

Please report any issues or suggestions on our repo

trongate-vscode's People

Contributors

dafa66 avatar jakecastelli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

trongate-vscode's Issues

tg:submit

$this->input('blah', true)

Trongate 2
post('blah', true)

Make new demo gif

The demo was from our version 0.0.1 and has been a lot of the changes, specially the CSS Selector dropdown trigger is CTRL + ALT + CMD/ WIN/ SUPER + /

We also got sub module creation support and prevent bad module name

  • General module creation demo gif

  • Sub module creation demo gif

  • Nitro demo gif

  • Code Snippets

Trongate-vscode v1.1.0

As Trongate Framework itself has got some update overtime such as ๐Ÿ‘‰ #34
We need to address all the update / breaking changes in trongate-vscode extension, also consider bring in Trongate CSS

  • #32
  • #34
  • #36
  • Move changelog from README to CHANGELOG
  • In README we prior Trongate over BS4
  • #37
  • #40

Typos in the generated view_file.(my hacktober donation) hehe

`<?php
class Test extends Trongate {

function index () {
    $data['view_module'] = 'test';
    $this->view('test_view', $data);
    /* Uncomment the lines below, 
     * Change the template method name, 
     * Remove lines above, if you want to load to the template
     */
    //$data['view_module'] = 'test';
    //$ data['view_file] = 'test_view';
    //$this->template('template method here', $data);
}  

}`

In the commented out line the view file one. $data has a space $ data and the brackets need a closing apostrophe.

[TODO] Prepare for the v1.0.2 release

Update Summary:

  • IMPORTANT the new release will be able to support super module creation #23

  • The v1.0.2 release will allow the user to name the view file rather than hardcoded module name + _view

  • Fixed a couple of typos which was found in v1.0.1 such as -> #20, thanks to @monxian

  • Improved cursor position after create a new module

Testing:

Add License

  • MIT License

README:

small tweak on: tgm and tg:submit

  1. the function body created by tgm has a little bit of issue with format:
function index () {

}

There is an unwanted space in between function name and parenthesis

  1. when use tg:submit, the cursor should be positioned at validation function

Thanks David for the suggestion.

Warning for CSS

Resource interpreted as Stylesheet but transferred with MIME type application/x-empty: xxx.

This is because the generated css file is default empty. The easiest way to get around is to add a comment line inside css file.

[TODO] List Before v1.0.0 Release

Code Side:

  • Give user a notice once they change the front-end framework - a pop up message and a status bar message will show up

  • Fix the key binding on Mac ctrl + cmd + alt + n and ctrl + cmd + alt + p not working - replace with other keys (Mac only)

  • Add essential dependencies and remove the redundant dependencies from package.json - reduce the extension size

  • Add more commonly used snippets in terms of PHP @DaFa66 @jakecastelli

  • Write essential comments in case collaboration or future maintains

  • Code Refactor

  • Figure out how to make it compatible even with lower version of VSCode as mentioned here #2

  • A tinny new feature that can persist user's Nitro Framework selection

File Structure Side:

  • Structure the front-end framework snippets into a separate folder - such as snippets/front-end-framework/milligram.json - in order to separate trongate php snippets and front-end frameworks

  • Remove the junk folder as it is not needed

README Side:

  • Add explanation for Nitro usage

  • Demo for Nitro - suggestion: if you could figure out the way to show your key pressed on the screen that would be helpful @DaFa66

  • Add to snippet table if any new snippet gets added

Testing Side:

Avoid module trigger phrase

This potential issue has been bothered us for a while #10

When the user names its module with a module trigger phase and then will get a blank page, and it is super hard to debug.
If the user changes the module trigger phrase, then, our dynamically generated module would crash as we previously hard coded the module trigger phrase to _module.

Now, we fixed this issue in #23.

The extension will dynamically read the config file and extract the MODULE_ASSETS_TRIGGER and if the user names its module which contains the trigger phrase, the extension will terminate the process and let the user know what happened.

Besides, if the user changes the module trigger phrase in the config file, the view file will not fail as we dynamically links up the module trigger phrase.

Super module supports

When create a new module, the extension should first determine if it is a general module or a super module.

The boilerplate code for super module is different from general module.

Set default file as a php file

Excellent extension.

For those wondering how to set a new file to php by default.

Files > Preferences > Settings
Files: Default Language

Enter php in the box.

[Features] Feature tracks

I just came up with few new thoughts, and maybe worth to keep tracking them here in case I forget later.

  • Create a new Trongate Module only the parent folder is modules - this would prevent the user to create a new module under a wrong dir

  • Discuss about how to trigger the front-end framework snippets, at the moment is tg:{framework name initial}:{object you want to create} - this might not be ideal as all the snippet suggestions would pop up once you type tg:

  • Add more Trongate related snippets to tg.json

  • Refactor the code before publishing to the marketplace

Make bottom status bar item clickable

Currently the selected CSS framework is shown in the bottom status bar, but it is not clickable, the way to trigger CSS framework selection is to use command, which is not user friendly (especially for beginners).

Can't Install the extension

When trying to install this extension i get this error message.
I'm on a Mac btw if that makes a difference.

"Unable to install 'jc-sf.trongate' extension because it is not compatible with the current version of VS Code (version 1.48.2)."

Code refactor - new Trongate Module part

The new Trongate Module part still need to be refactored - simply three reasons:

  1. Make the code more readable to the future contributors

  2. Decouple the modules and functions as more features can be expanded upon the existing code base

  3. Fix type annotation errors and interfaces

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.