Giter Site home page Giter Site logo

sketch-n-script's Introduction

How to deploy

Installation

  1. Install clasp. Open a terminal anywhere, and run:

    npm i @google/clasp -g
    
  2. Log into clasp. Open a terminal anywhere, and run:

    clasp login
    

Integrate Sketch-n-Script in a Doc for testing

  1. Create a Google Doc. Open Tools > Script editor. Give the project a NAME and save it. The files in this project template will soon be overriden.

  2. Open File > Project properties and copy the Script ID value.

  3. Pull a fresh clone of Sketch-n-Script and then cd Sketch-n-Script.

  4. Run clasp clone NAME.

  5. The last step will create a starter skeleton Code.js file. Run git checkout Code.js to revert to the version from Sketch-n-Script.

  6. Create a file .clasp.json that contains the the following:

    {"scriptId":"XXX"}
    

    Replace XXX by the Script ID obtained above.

  7. Try making a change to Code.js (e.g. change the string argument to .setSetTile'). Then run clasp push`.

    If asked for confirmation, enter y for Yes.

    You might have to go to https://script.google.com/home/usersettings to activate the Script API (change it from Off to On), and then re-run clasp push.

  8. Refresh your script page from the browser, or run clasp open to open the script in a new browser window.

  9. Go to Run > Run function > onOpen. Accept the permissions. A menu appears under the Add-on menu, click it, then Start to open the side bar.

  10. (I had trouble with the previous step: Instead, I:) Open Run > Test as add-on... and then picke a Doc on which to test NAME. Then, from inside that Doc, go to Add-ons > NAME > Start to launch the add-on.

Now the add-on is working for this script.

Developing the Sketch-n-Script add-on

You can develop the add-on locally or in the online script editor. To push changes made locally, run

clasp push

To pull changes made online, run

clasp pull

/!\ Be careful if you make changes locally AND online. The last two commands will overwrite each other's file.

If you made changes both locally and online, do the following.
Run locally:

git stash
clasp pull
git stash pop
clasp push

So that now the changes have been merged and are in sync. Remember to commit any meaningful changes.

/!\ Always pull your online changes locally before merging other branches locally.

Ignore files

If you don't want that clasp push some files or folders, note that clasp ignores files

  • That start with a .
  • That don't have an accepted file extension
  • That are ignored (filename matches a glob pattern in the .claspignore file)

Working with typescript files

If running the first time, install the necessary dependencies:

npm install

Typescripts files are located in src/. To convert them to javascript files in the add-on folder, run

npm run compile

Run tests

npm run test

Publishing the add-on (for authors only)

  • Make sure all changes are pushed online.
  • Make sure .clasp.json is referring to the correct script ID.
  • Go to File > Manage version, enter a name for this version, and click on "Save a new version", then "Ok"
  • In the online interface for the script editor, go to: Publish > Deploy as a Google Docs add-on. On the top right, select the name of the version you just saved. Click Update published project. It will lead you to the developer tools where you can update the documentation.

Pull requests welcome!

More instructions about the clasp command line can be found here: https://codelabs.developers.google.com/codelabs/clasp/

sketch-n-script's People

Contributors

mikaelmayer avatar ravichugh avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

tepez

sketch-n-script's Issues

Variable names

Thanks for building this, it's filling such an important gap.

Regarding variable names, it seems like currently the only variable name cases supported are:

this_variable
thisVariable

Would it be possible to support these cases as well?

this-variable
this.variable
this/variable

When you have lots of variables, it's nice to namespace them visually.

[FormulasForGoogleDocs] Hide variables initialisation

(It's not a bug but a Feature Request)
When evaluating formulas, the previously declaration variable = value are still displayed.
Maybe when "Evaluating formulas", you can hide the variable declaration, as if you change them it doesn't directly change the impacted text.
Or maybe automatically evaluate formulas when the document is saved or regularly?

[FormulasForGoogleDocs] Highlighted formulas continues after line break

If I select "Reveal formula under cursor" or "Reveal formulas, formulas are revealed and highlighted in orange.
If I edit a formula and press [Enter], I go to the following line and entered text continues to be highlighted in orange.
If I then select "Evaluate formulas", the formulas are evaluated and back in the default background color, but the entered text outside the formulas highlighted in orange keeps its highlighting.

Maybe detect when in a formula the end of the formula (line feed or space), in order to stop the highlignting beforehand?

[FormulasForGoogleDocs] Formula that creates an evaluated formula

If I create the formula =("=test"), then I evaluate formulas, the result will be =test.
But if I press Evaluate formulas again, this text is evaluated to whatever the variable test is.
If I then press "Reveal formulas", only the =test formula is shown, not the original.

Note: is there a way to "escape" formulas in order to show them without evaluation?

Generic Error when clicking "Display Values"

Error while computing last '=PLG4EEtEqdX0zVOjjXbeC7lcJkVNW0nn8E[Evaluation error: ReferenceError: L'élément "PLG4EEtEqdX0zVOjjXbeC7lcJkVNW0nn8E" n'est pas défini.]', SyntaxError: Signe ] manquant dans l'expression d'index.

Header & footer support

When testing with a Google Docs document including a header and a footer including a variable and/or a formula, clicking on Display values doesn't "evaluate" variables nor formulas.

The expected behavior would be for variables and formulas in both header and footer to be "evaluated".

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.