timfish

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug",
      "type": "chrome",
      "request": "launch",
      "port": 9222,
      "sourceMaps": true,
      "internalConsoleOptions": "openOnSessionStart",

timfish

As you start out with your Electron app, you'll start to notice some features which have been carried directly across from the browser realm but make less sense for a desktop app. Here are the ones I can remember:

Ctrl or ⌘ + Click Opens Links in New Window

In Electron just like in Chrome, if you hold down the Ctrl key (or ⌘ on Mac) while clicking a link it opens in a new window. For many SPA apps, this is undesired and will load another full copy of your app in another window. You can disable this by calling the following code once you've created a BrowserWindow

win = new BrowserWindow({ ... });

timfish

<template>
  
  <h2>My parent id: ${id}</h2>
  
  <pre repeat.for="each of someObject">
    each.id: ${each.id}
    id: ${id}
    $parent.id: ${$parent.id}
  </pre>
  

timfish

<template>
  <require from="./svg-rect"></require>
  
  <svg width="100" height="100" style="background-color:lightblue">
    
    <rect></rect>
  </svg>
</template>

timfish

<template>
  <require from="./svg-rect"></require>
  
  <svg width="100" height="100" style="background-color:lightblue">
    
    <svg-rect rect.bind="{x: 5, y: 5, width: 30, height: 20}"></svg-rect>
  </svg>
</template>

timfish

<template>
  <require from="./svg-rect"></require>
  
  <svg width="100" height="100" style="background-color:lightblue">
    
    <svg-rect rect.bind="{x: 5, y: 5, width: 30, height: 20}"></svg-rect>
  </svg>
</template>

timfish

body.ai-dialog-open #main-content {
    filter: blur(3px);
}

ai-dialog-overlay {
  background-color: rgba(0,0,0,.2);
}

timfish

<template>
  <require from="./svg-rect"></require>
  
  <svg width="100" height="100" style="background-color:lightblue">
    
    <svg-rect rect.bind="{x: 5, y: 5, width: 30, height: 20}"></svg-rect>
  </svg>
</template>

timfish

<template>
  <require from="./svg-rect"></require>
  
  <svg width="100" height="100" style="background-color:lightblue">
    
    <svg-rect rect.bind="{x: 5, y: 5, width: 30, height: 20}"></svg-rect>
  </svg>
</template>

timfish

<template>
  <require from="./select-component"></require>
  	  
  <select-component selected.bind="selected"></select-component>
  
  <div>
    Selected: ${selected.name} 
  </div>
</template>