Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/estruyf/vscode-demo-time
A Visual Studio Code extension to help you script your demos
https://github.com/estruyf/vscode-demo-time
demo demo-app demo-time vscode vscode-extension
Last synced: 2 months ago
JSON representation
A Visual Studio Code extension to help you script your demos
- Host: GitHub
- URL: https://github.com/estruyf/vscode-demo-time
- Owner: estruyf
- License: mit
- Created: 2023-12-01T13:29:08.000Z (about 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-10-21T09:34:40.000Z (2 months ago)
- Last Synced: 2024-10-21T13:40:53.154Z (2 months ago)
- Topics: demo, demo-app, demo-time, vscode, vscode-extension
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-demo-time
- Size: 6.45 MB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Unlock a new dimension in presenting coding demos – effortlessly click through them as if they were presentation slides, thanks to this cutting-edge VSCode extension.
## Features
Currently the extension supports the following features:
- Multiple demo files located in `.demo` folder
- Support for code/snippet files in the `.demo` folder. These files can be referenced in the demo steps, instead of adding the code in the JSON file.
- Explorer panel to execute your demo steps
- Add new demo steps (execute the `Demo Time: Add as demo step` command)
- Run through the demo steps (execute the `Demo Time: Start` command)
- Presentation mode which allows you to use a clicker to navigate through the demo steps
- Run a specific demo step from a command execution with the `demo-time.runById` command
### Supported demo steps
#### File actions
Action
Description
Usage
create
Create a new file
```json
{
"action": "create",
"path": "",
"content": " (optional)",
"contentPath": " (optional)"
}
```
open
Open a file
```json
{
"action": "open",
"path": ""
}
```
#### Code actions
Action
Description
Usage
insert
Insert code into a file
```json
{
"action": "insert",
"path": "",
"position": " or :",
"content": " (optional)",
"contentPath": " (optional)"
}
```
replace
Replace code in a file
```json
{
"action": "replace",
"path": "",
"position": " or :",
"content": " (optional)",
"contentPath": " (optional)"
}
```
delete
Delete code from a file
```json
{
"action": "delete",
"path": "",
"position": " or :"
}
```
highlight
Highlight code in a file. You can change the border color with the
`demoTime.highlightBorderColor` setting.
```json
{
"action": "highlight",
"path": "",
"position": " or :"
}
```
unselect
Unselect code in a file
```json
{
"action": "unselect",
"path": ""
}
```
#### Time actions
Action
Description
Usage
waitForTimeout
Wait for a specific amount of time
```json
{
"action": "waitForTimeout",
"timeout": ""
}
```
waitForInput
Wait until the user presses a key
```json
{
"action": "waitForInput"
}
```
#### VSCode actions
Action
Description
Usage
executeVSCodeCommand
Execute a VSCode command
```json
{
"action": "executeVSCodeCommand",
"command": "",
"args": ""
}
```
showInfoMessage
Show a notification in Visual Studio Code
```json
{
"action": "showInfoMessage",
"message": ""
}
```
#### Terminal actions
Action
Description
Usage
executeTerminalCommand
Execute a command in the terminal
```json
{
"action": "executeTerminalCommand",
"command": ""
}
```
#### Snippets
Action
Description
Usage
snippet
Use a snippet in which you can define multiple reusable steps
```jsonc
{
"action": "snippet",
"contentPath": " (optional)"
"args": {
// Define the argument name in the snippet file with curly braces {argument name}
"": ""
}
}
```
## Usage
To use the extension, you need to create a `.demo` folder in your workspace. Once created, you can add a JSON file which contains the demo and its steps.
## Settings
| Setting | Description | Default |
| --- | --- | --- |
| `demoTime.highlightBorderColor` | The border color of the highlighted code | `rgba(255,0,0,0.5)` |
| `demoTime.highlightZoomEnabled` | Enable zooming when highlighting code | `false` |
| `demoTime.showClock` | Show a clock in the status bar | `true` |
| `demoTime.timer` | Count down timer for how long the session should last. If not set, it will not count down. The value is the number of minutes. | `null` |
### Tips
#### Position
For the position you can use the following formats:
- `number`: The line number
- `number:number`: The start and end line number
- The `start` and `end` keywords can also be used instead of the line numbers
- `start` will be replaced by the first line number
- `end` will be replaced by the last line number
#### Adding content to a file
When you want to insert content to a file, you can use the `content` or `contentPath` properties in the demo step.
| Property | Description |
| --- | --- |
| `content` | This property allows you to add the content directly in the JSON file, but this can make your JSON file quite big and it can be hard to read. |
| `contentPath` | This property allows you to reference a file in the `.demo` folder. This way you can keep your JSON file clean and add the content in separate files. **Important**: the path is relative to the `.demo` folder. |
### Example
Here is an example demo:
```json
{
"$schema": "https://elio.dev/demo-time.schema.json",
"title": "Playwright demo",
"description": "Playwright demo for Microsoft 365",
"demos": [{
"title": "Login to Microsoft 365",
"description": "Login to Microsoft 365 using Playwright",
"steps": [{
"action": "create",
"path": "/tests/login.setup.ts",
"content": "import { test as setup } from \"@playwright/test\";\nimport { existsSync } from \"fs\";\n\nconst authFile = \"playwright/.auth/user.json\";\n\n// More info: https://playwright.dev/docs/auth\n\nsetup(\"authenticate\", async ({ page }) => {\n // Check if the auth file exists\n if (existsSync(authFile)) {\n return;\n }\n\n await page.goto(process.env.SP_DEV_PAGE_URL || \"\");\n\n page.locator(\"input[type=email]\").fill(process.env.SP_DEV_USERNAME || \"\");\n\n await page.getByRole(\"button\", { name: \"Next\" }).click();\n\n page.locator(\"input[type=password]\").fill(process.env.SP_DEV_PASSWORD || \"\");\n\n await Promise.all([\n await page.locator(\"input[type=submit][value='Sign in']\").click(),\n await page.locator(\"input[type=submit][value='Yes']\").click(),\n await page.waitForURL(process.env.SP_DEV_PAGE_URL || \"\"),\n ]);\n\n await page.context().storageState({ path: authFile });\n});"
},
{
"action": "open",
"path": "/tests/login.setup.ts"
}
]
},
{
"title": "First SharePoint tests",
"description": "Create the first SharePoint tests",
"steps": [{
"action": "create",
"path": "/tests/pages/sharepoint.spec.ts",
"content": "import { test, expect, Page } from \"@playwright/test\";\n\n// test.describe.configure({ mode: \"serial\" });\n\ntest.describe(`Validate sticker inventory`, () => {\n let page: Page;\n\n test.beforeAll(async ({ browser }) => {\n page = await browser.newPage();\n await page.goto(process.env.SP_DEV_PAGE_URL || \"\", {\n waitUntil: \"domcontentloaded\",\n });\n\n await page\n .locator(\n `div[data-sp-web-part-id=\"0e05b9af-5e56-4570-8b3e-9d679f8b2fcf\"]`\n )\n .waitFor();\n });\n\n test(`Check if webpart is rendered`, async () => {\n const webpart = page.locator(\n `div[data-sp-web-part-id=\"0e05b9af-5e56-4570-8b3e-9d679f8b2fcf\"]`\n );\n await expect(webpart).toBeVisible();\n });\n\n test.afterAll(async () => {\n await page.close();\n });\n});"
},
{
"action": "open",
"path": "/tests/pages/sharepoint.spec.ts"
},
{
"action": "highlight",
"path": "/tests/pages/sharepoint.spec.ts",
"position": "21:26"
}
]
},
{
"title": "Check the amounts",
"description": "Check the amounts of the stickers",
"steps": [{
"action": "insert",
"path": "/tests/pages/sharepoint.spec.ts",
"position": 27,
"content": "\n test(`Check if there are 7 stickers`, async () => {\n const stickers = page.getByTestId(`sticker_inventory__overview__sticker`);\n await expect(stickers).toHaveCount(7);\n });\n"
}]
}
]
}
```
