diff --git a/.github/images/site-not-secure.png b/.github/images/site-not-secure.png new file mode 100644 index 000000000..31eaf9ec4 Binary files /dev/null and b/.github/images/site-not-secure.png differ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 216cd08fb..582aee7e8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -57,27 +57,25 @@ Warning: Cannot update during an existing state transition (such as within `rend You can safely ignore these -- those won't show up to users on the production site. -## Trust the certificates - -You will need to trust the certificates for each of (editor), (runner), and (server). +## Bypassing localhost HTTPS security issues For testing in the web browser (whether standalone or in Office Online) in Chrome, you can bypass the "insecure localhost" by enabling this setting: -For testing on a PC version of Office, you will need to trust the certificates from within Internet Explorer. See the gif below for a step-by-step animation: +For testing on a PC version of Office, you _could_ trust the certificates from within Internet Explorer. However, new certs get generated every time that you run `yarn start`, so trusting them over and over again is tedious. If you're only interested in making changes to code that runs inside the taskpanes (which is what you will be doing 99% of the time for any Editor/Runner changes, unless you're debugging something to do with "functions.html" and the other ribbon buttons), you can just click through the "This site is not secure" warning and choose "Go on to the website (not recommended)" option. -![](.github/images/trust-ssl-internet-explorer.gif). +![Proceed through "This site is not secure"](.github/images/site-not-secure.png). -This is a particularly critical step for loading the Add-in inside of Office on a PC. If you fail to trust the certificates, you might see the following error: +If you _do_ need to trust the certificates, see below for a step-by-step animation. But be aware that you'll keep having to repeat these steps... The sites you'd need to trust are (editor) and (runner). -![](.github/images/add-in-loading-error.png). +![Trust SLL instructions](.github/images/trust-ssl-internet-explorer.gif). ## Testing inside of an add-in -1. Locate the add-in manifest (which you'll find in the `manifests` folder in the root of the repo). For purposes of running against localhost, use `localhost.xml`. +The **easiest** option is to install the **Store** version of the add-in (get it from ). Then, using the dropdown on bottom left when in the Settings mode, switch to alpha -- and **from alpha, to localhost**. Note that the localhost option will only show up if you're in alpha (or already on localhost). The steps are akin to what's [described in the README](README.md#2017) for switching to Script Lab 2017, except choosing "Alpha" and then "localhost:3000" instead. + +Note that just like described in the section above, you will need to bypass the HTTPS security warning for localhost. -2. Sideload the manifest into your office host application. Use **either** option: - - Sideload the localhost manifest located in 'manifests/script-lab-react-localhost.xml', using the instructions on . - - Alternatively, install the **Store** version of the add-in, then switch environments (via dropdown on bottom left when in Settings mode) to alpha -- and **from alpha, to localhost**. Note that the localhost option will only show up if you're in alpha (or already on localhost). Also note that you need to be careful, it will stay stuck on _localhost_ until you undo it -- so if your local server isn't running, Script Lab might appear to be broken for you! +**Alternatively**, you can also sideload the localhost manifest directly (though for that option, you might be forced to trust and re-trust the certificates!). The manifest is located at 'manifests/script-lab-react-localhost.xml', and instructions for sideloading can be found at . ## [Optional] Testing GitHub auth locally (on localhost) diff --git a/README.md b/README.md index d032ee72c..7c8aca9fc 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,30 @@ [![Build Status](https://travis-ci.com/OfficeDev/script-lab.svg?token=paK2s5RGiCpVHK6bYoFs&branch=master)](https://travis-ci.com/OfficeDev/script-lab) + [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) + [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) + [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md) # Script Lab, a Microsoft Garage project Experiment with the Office JavaScript API without ever leaving Excel, Word, or PowerPoint! [**Get Script Lab for free, from the Office Store**](https://store.office.com/app.aspx?assetid=WA104380862). -> Note: Script Lab has been re-written from the ground up in 2018, on a brand-new technology stack, including React and Fabric React. For the older version of Script Lab 2017, see more [below](README.md#2017). +> Note: Script Lab has been re-written from the ground up in 2018, on a brand-new technology stack, including React and Fabric React. For the older version of Script Lab 2017, see more [below](README.md#2017). ## Topics -* [What is Script Lab?](README.md#what-is) -* [Get started](README.md/#get-started) -* [Import someone else's snippet, or export your own](README.md#import) -* [Report a bug, or suggest a feature](README.md#report-bug) -* [Script Lab vs "Script Lab 2017"](README.md#2017) -* [Use Script Lab with older Office versions (Office 2013)](README.md/#office-2013) -* [Stay up-to-date](README.md/#up-to-date) -* [Rate and review](README.md#rate-and-review) -* [Contribute to Script Lab](README.md#contribute) -* [Articles & FAQs](README.md/#articles) -* [External blog posts & media coverage](README.md/#external-posts) +- [What is Script Lab?](README.md#what-is) +- [Get started](README.md/#get-started) +- [Import someone else's snippet, or export your own](README.md#import) +- [Report a bug, or suggest a feature](README.md#report-bug) +- [Script Lab vs "Script Lab 2017"](README.md#2017) +- [Use Script Lab with older Office versions (Office 2013)](README.md/#office-2013) +- [Stay up-to-date](README.md/#up-to-date) +- [Rate and review](README.md#rate-and-review) +- [Contribute to Script Lab](README.md#contribute) +- [Articles & FAQs](README.md/#articles) +- [External blog posts & media coverage](README.md/#external-posts) @@ -32,9 +35,9 @@ Wouldn't it be crazy if you could launch Excel, click to open a small code windo Script lab is a tool for anyone who wants to learn about writing Office add-ins for Excel, Word, or PowerPoint. The focus is the Office JavaScript API, which is the technology you need for building Office Add-ins that run across platforms. Maybe you're an experienced Office developer and you want to quickly prototype a feature for your add-in. Or maybe you've never tried writing code for Office and you just want to play with a sample and tweak it to learn more. Either way, Script Lab is for you. Script Lab has three main features: -* **Code** in a pane beside your spreadsheet. IntelliSense is there while you type so you can easily discover and use the Office JavaScript objects and methods. And if you don't want to start from scratch there are plenty of samples pre-installed with Script Lab. Your snippets can use any TypeScript features like arrow functions, template strings, and async/await (i.e., a good chunk of ES6 and ES7 features). But it's not only script: your snippets can also use HTML, CSS, and references to external libraries and data on the web. Script Lab uses the Monaco editor, the same tech that powers VS Code, so it's beautiful and lightweight. -* **Run** the code in another pane beside the editor. Execution can include logic, API calls to Office, UI in the pane, and even output to a console. Every time you make a code change you can refresh the editor and run the new version in seconds. -* **Share** your snippets through GitHub. If you create a snippet you'd like to share, you can use Script Lab to save it. Then send the link to someone else to try it and tweak it on their computer. The Import feature lets you load other people's snippets. +- **Code** in a pane beside your spreadsheet. IntelliSense is there while you type so you can easily discover and use the Office JavaScript objects and methods. And if you don't want to start from scratch there are plenty of samples pre-installed with Script Lab. Your snippets can use any TypeScript features like arrow functions, template strings, and async/await (i.e., a good chunk of ES6 and ES7 features). But it's not only script: your snippets can also use HTML, CSS, and references to external libraries and data on the web. Script Lab uses the Monaco editor, the same tech that powers VS Code, so it's beautiful and lightweight. +- **Run** the code in another pane beside the editor. Execution can include logic, API calls to Office, UI in the pane, and even output to a console. Every time you make a code change you can refresh the editor and run the new version in seconds. +- **Share** your snippets through GitHub. If you create a snippet you'd like to share, you can use Script Lab to save it. Then send the link to someone else to try it and tweak it on their computer. The Import feature lets you load other people's snippets. You can [install Script Lab right now for free from the Office Store](https://store.office.com/app.aspx?assetid=WA104380862)! It works for Excel, Word, PowerPoint, and Project. You'll need Office 2013 or later, Office Online, or Office for Mac. @@ -82,9 +85,9 @@ Finally, if you have a **question**, please ask it on ## Stay up-to-date -* Follow [@OfficeDev](https://twitter.com/OfficeDev) on Twitter -* Follow [Script Lab](https://medium.com/script-lab) articles on [medium.com](https://medium.com/script-lab) -* Join our Office Developer program at [dev.office.com](https://dev.office.com/) +- Follow [@OfficeDev](https://twitter.com/OfficeDev) on Twitter +- Follow [Script Lab](https://medium.com/script-lab) articles on [medium.com](https://medium.com/script-lab) +- Join our Office Developer program at [dev.office.com](https://dev.office.com/) @@ -121,10 +124,10 @@ Second, Office 2013 (and Office 2016 RTM, if you don't have an Office 365 subscr There are a bunch of ways you can contribute to Script Lab: -* File bugs & suggestions (see more in "[Report a bug, or suggest a feature](README.md#report-bug)" above). -* Contribute new samples, or improve existing one. Please submit a pull request to the [office-js-snippets repo](https://github.com/OfficeDev/office-js-snippets); more info in the [README](https://github.com/OfficeDev/office-js-snippets/blob/master/README.md) of that repo. -* Spread the word! Whether through writing a blog post (README.md#external-posts), recording a video, tweeting about us, or sharing snippets with colleagues or the [StackOverflow](https://stackoverflow.com/questions/tagged/office-js) community -- we want more of the world to use Script Lab! -* Help improve the documentation. If you feel like this README or the [CONTRIBUTING.md doc](CONTRIBUTING.md) could use more details, please send a pull request! +- File bugs & suggestions (see more in "[Report a bug, or suggest a feature](README.md#report-bug)" above). +- Contribute new samples, or improve existing one. Please submit a pull request to the [office-js-snippets repo](https://github.com/OfficeDev/office-js-snippets); more info in the [README](https://github.com/OfficeDev/office-js-snippets/blob/master/README.md) of that repo. +- Spread the word! Whether through writing a blog post (README.md#external-posts), recording a video, tweeting about us, or sharing snippets with colleagues or the [StackOverflow](https://stackoverflow.com/questions/tagged/office-js) community -- we want more of the world to use Script Lab! +- Help improve the documentation. If you feel like this README or the [CONTRIBUTING.md doc](CONTRIBUTING.md) could use more details, please send a pull request! Finally, if you want to contribute code (bug fixes, features, localization, etc.), please see [CONTRIBUTING.md](CONTRIBUTING.md) to get you up and running with a local copy of Script Lab -- and then send us a pull request. @@ -140,19 +143,20 @@ Of course, we'd prefer that if you have issues you [report them on GitHub](https ## Articles & FAQs -* Script Lab overview: ["You can write JavaScript in Excel!"](https://medium.com/script-lab/you-can-write-javascript-in-excel-4ba588a948bd) -* Project history & the technology behind it: [Episode 127 on the Office 365 Developer Podcast](https://blogs.office.com/2017/04/20/episode-127-new-script-lab-office-add-michael-zlatkovsky-bhargav-krishna-office-365-developer-podcast/) +- Announcing Script Lab React (January 1, 2019): [Official blog post](https://developer.microsoft.com/en-us/office/blogs/announcing-script-lab-react/) +- Script Lab overview: ["You can write JavaScript in Excel!"](https://medium.com/script-lab/you-can-write-javascript-in-excel-4ba588a948bd) +- Project history & the technology behind it: [Episode 127 on the Office 365 Developer Podcast](https://blogs.office.com/2017/04/20/episode-127-new-script-lab-office-add-michael-zlatkovsky-bhargav-krishna-office-365-developer-podcast/) ## External blog posts & media coverage -* August 29, 2017: ["Start Developing in OfficeJS Today with Script Lab"](http://theofficecontext.com/2017/08/29/start-developing-in-officejs-today-with-script-lab/) _by David Craig at theofficecontext.com_ -* July 30, 2017: _[German]_ ["Eigene Script Lab Scripte in Office Online testen"](http://www.excel-ticker.de/eigene-script-lab-scripte-in-office-online-testen/). (Auto-translation: ["Test your own Script Lab scripts in Office Online"](http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http%3A%2F%2Fwww.excel-ticker.de%2Feigene-script-lab-scripte-in-office-online-testen%2F)) _by [Mourad Louha](https://twitter.com/maninweb)_ -* June 14, 2017: _[Portuguese]_ ["Script Lab: Novo add-in da Microsoft"](https://medium.com/leonardo-xavier/script-lab-novo-add-in-da-microsoft-f8aee5bf0dd2). (Auto-translation: ["Script Lab: New Microsoft add-in"](https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=https%3A%2F%2Fmedium.com%2Fleonardo-xavier%2Fscript-lab-novo-add-in-da-microsoft-f8aee5bf0dd2&edit-text=&act=url)), by _[Leonardo Xavier](https://medium.com/leonardo-xavier)_. -* May 1, 2017: _[German]_ ["Prototyping von Microsoft Office JavaScript Add-Ins mit Script Lab"](http://www.excel-ticker.de/prototyping-von-microsoft-office-javascript-add-ins-mit-script-lab/). (Auto-translation: ["Prototyping Microsoft Office JavaScript add-ins with Script Lab"](http://www.microsofttranslator.com/bv.aspx?&lo=TP&from=de&to=en&a=http%3A%2F%2Fwww.excel-ticker.de%2Fprototyping-von-microsoft-office-javascript-add-ins-mit-script-lab%2F)), _by [Mourad Louha](https://twitter.com/maninweb)_ -* May 1, 2017: _[Portuguese]_ ["Microsoft lança o Script Lab"](http://mlf.net.br/blog/microsoft-lanca-o-script-labs/). (Auto-translation: ["Microsoft Launches Script Lab"](http://www.microsofttranslator.com/bv.aspx?from=pt&to=en&a=http%3A%2F%2Fmlf.net.br%2Fblog%2Fmicrosoft-lanca-o-script-labs%2F)), _by Felipe Costa Gualberto_. -* April 18, 2017: ["Microsoft Garage Releases Script Lab"](https://winbuzzer.com/2017/04/18/microsoft-garage-releases-script-lab-tool-test-javascript-apis-inside-office-suite-xcxwbn/) _by Ryan Maskell at winbuzzer.com_ +- August 29, 2017: ["Start Developing in OfficeJS Today with Script Lab"](http://theofficecontext.com/2017/08/29/start-developing-in-officejs-today-with-script-lab/) _by David Craig at theofficecontext.com_ +- July 30, 2017: _[German]_ ["Eigene Script Lab Scripte in Office Online testen"](http://www.excel-ticker.de/eigene-script-lab-scripte-in-office-online-testen/). (Auto-translation: ["Test your own Script Lab scripts in Office Online"](http://www.microsofttranslator.com/bv.aspx?from=&to=en&a=http%3A%2F%2Fwww.excel-ticker.de%2Feigene-script-lab-scripte-in-office-online-testen%2F)) _by [Mourad Louha](https://twitter.com/maninweb)_ +- June 14, 2017: _[Portuguese]_ ["Script Lab: Novo add-in da Microsoft"](https://medium.com/leonardo-xavier/script-lab-novo-add-in-da-microsoft-f8aee5bf0dd2). (Auto-translation: ["Script Lab: New Microsoft add-in"](https://translate.google.com/translate?sl=auto&tl=en&js=y&prev=_t&hl=en&ie=UTF-8&u=https%3A%2F%2Fmedium.com%2Fleonardo-xavier%2Fscript-lab-novo-add-in-da-microsoft-f8aee5bf0dd2&edit-text=&act=url)), by _[Leonardo Xavier](https://medium.com/leonardo-xavier)_. +- May 1, 2017: _[German]_ ["Prototyping von Microsoft Office JavaScript Add-Ins mit Script Lab"](http://www.excel-ticker.de/prototyping-von-microsoft-office-javascript-add-ins-mit-script-lab/). (Auto-translation: ["Prototyping Microsoft Office JavaScript add-ins with Script Lab"](http://www.microsofttranslator.com/bv.aspx?&lo=TP&from=de&to=en&a=http%3A%2F%2Fwww.excel-ticker.de%2Fprototyping-von-microsoft-office-javascript-add-ins-mit-script-lab%2F)), _by [Mourad Louha](https://twitter.com/maninweb)_ +- May 1, 2017: _[Portuguese]_ ["Microsoft lança o Script Lab"](http://mlf.net.br/blog/microsoft-lanca-o-script-labs/). (Auto-translation: ["Microsoft Launches Script Lab"](http://www.microsofttranslator.com/bv.aspx?from=pt&to=en&a=http%3A%2F%2Fmlf.net.br%2Fblog%2Fmicrosoft-lanca-o-script-labs%2F)), _by Felipe Costa Gualberto_. +- April 18, 2017: ["Microsoft Garage Releases Script Lab"](https://winbuzzer.com/2017/04/18/microsoft-garage-releases-script-lab-tool-test-javascript-apis-inside-office-suite-xcxwbn/) _by Ryan Maskell at winbuzzer.com_ ## Build Status @@ -162,5 +166,4 @@ Of course, we'd prefer that if you have issues you [report them on GitHub](https | beta | [![Build Status](https://travis-ci.com/OfficeDev/script-lab.svg?token=QwPYmFbjQw87cQmG1ogy&branch=beta)](https://travis-ci.com/OfficeDev/script-lab) | [script-lab-react-beta](https://script-lab-react-beta.azurewebsites.net/) | [script-lab-react-runner-beta](https://script-lab-react-runner-beta.azurewebsites.net/) | [script-lab-react-server-beta](https://script-lab-react-server-beta.azurewebsites.net/hello) | [script-lab-react-storybook-beta](https://script-lab-react-storybook-beta.azurewebsites.net/) | | production | [![Build Status](https://travis-ci.com/OfficeDev/script-lab.svg?token=QwPYmFbjQw87cQmG1ogy&branch=production)](https://travis-ci.com/OfficeDev/script-lab) | [script-lab-react](https://script-lab-react.azurewebsites.net/) | [script-lab-react-runner](https://script-lab-react-runner.azurewebsites.net/) | [script-lab-react-server](https://script-lab-react-server.azurewebsites.net/hello) | [script-lab-react-storybook](https://script-lab-react-storybook.azurewebsites.net/) | - This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. diff --git a/packages/common/src/utilities/environment.redirector.ts b/packages/common/src/utilities/environment.redirector.ts index 259778dd3..92d6a43f6 100644 --- a/packages/common/src/utilities/environment.redirector.ts +++ b/packages/common/src/utilities/environment.redirector.ts @@ -63,15 +63,28 @@ async function redirectIfNeeded(): Promise { // When redirecting to localhost (dev scenario), it's very common that localhost // might not be running, and suddenly you're in a broken state and can't even // load the production add-in/site. - // As such, if will be redirecting to localhost, first check that localhost is running + // As such, if will be redirecting to localhost, first check that localhost is running. + // However, make the frame be **visible** so that if running on IE11/Desktop, + // the developer will see the message about opening unsecure website, and be able + // to proceed to it. if (redirectUrl.startsWith('https://localhost')) { const aliveChecker = document.createElement('iframe'); - aliveChecker.style.display = 'none'; + aliveChecker.style.zIndex = ( + 10000001 /* same as loading screen */ + 1 + ).toString(); + aliveChecker.style.border = 'none'; + aliveChecker.style.width = '100%'; + aliveChecker.style.height = window.innerHeight / 3 + 'px'; + aliveChecker.style.position = 'absolute'; + aliveChecker.style.bottom = '0'; aliveChecker.src = `${editorUrls.local}/alive.html`; - showSplashScreen(`Attempting to redirect to ${redirectUrl}...`); - const AMOUNT_OF_TIME_TO_WAIT_ON_LOCALHOST = 5000; + let manuallyCancelled: boolean = false; + const resultOfWaiting = await new Promise(resolve => { + const AMOUNT_OF_TIME_TO_WAIT_ON_LOCALHOST = 20000; /* Enough to let the developer + click "continue to site" in case of https certificate issue */ + const timeout = setTimeout(() => { resolve(false); }, AMOUNT_OF_TIME_TO_WAIT_ON_LOCALHOST); @@ -89,16 +102,30 @@ async function redirectIfNeeded(): Promise { }; window.addEventListener('message', handler, false); + + showSplashScreen( + `Attempting to redirect to "${redirectUrl}"... Click to cancel.`, + () => { + manuallyCancelled = true; + clearTimeout(timeout); + resolve(false); + }, + ); document.body.appendChild(aliveChecker); }); if (!resultOfWaiting) { + aliveChecker.parentNode.removeChild(aliveChecker); showSplashScreen( `"${editorUrls.local}" NOT responding. Staying on ` + window.location.origin, ); window.localStorage.removeItem(localStorageKeys.editor.redirectEnvironmentUrl); - // Give the developer two seconds to absorb this bit of info - await new Promise(resolve => setTimeout(resolve, 2000)); + + if (!manuallyCancelled) { + // Give the developer two seconds to absorb this bit of info + await new Promise(resolve => setTimeout(resolve, 2000)); + } + hideSplashScreen(); return false; } diff --git a/packages/common/src/utilities/splash.screen.ts b/packages/common/src/utilities/splash.screen.ts index b27de26c8..648b12f16 100644 --- a/packages/common/src/utilities/splash.screen.ts +++ b/packages/common/src/utilities/splash.screen.ts @@ -105,13 +105,34 @@ export function invokeGlobalErrorHandler( return true; } -export function showSplashScreen(subtitle: string) { +export function showSplashScreen(subtitle: string, onClick?: () => void) { const loadingIndicator = document.getElementById('loading')!; loadingIndicator.style.visibility = ''; - const subtitleElement = document.querySelectorAll('#loading h2')[0] as HTMLElement; + + const subtitleElement = replaceSubtitleElement(); subtitleElement.textContent = subtitle; + if (onClick) { + subtitleElement.addEventListener('click', _ => { + // Replace it, so that the click handler is now gone + replaceSubtitleElement(); + // And now fire the callback: + onClick(); + }); + } + (document.getElementById('root') as HTMLElement).style.display = 'none'; + + ///////////////////////////////////// + // Helper: + function replaceSubtitleElement(): HTMLElement { + const previousSubtitleElement = document.querySelectorAll( + '#loading h2', + )[0] as HTMLElement; + const clone = previousSubtitleElement.cloneNode(true); + previousSubtitleElement.parentNode.replaceChild(clone, previousSubtitleElement); + return clone as HTMLElement; + } } export function hideSplashScreen() {