Skip to content

link:*

Just like on is the input channel for event actions, so too is the link:* attribute the input channel for reference actions.

Reference actions can be used with the following pattern:

link:<attributeName>="hello"

This reads like the following:

  • assign the hello action of type reference as the input for the <attributeName> attribute

link:<name> links an attribute named <name> to a reference.

Both ref:* and link:* can specify an attribute name independently, because they do not always have to match.

Select color

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<p>Pick a value in the dropdown and see the color of the div change.</p>

<select class="input" ref:value="colorBoxValue">
  <option value="mt3 w3 h3 bg-red" selected>Red</option>
  <option value="mt3 w3 h3 bg-orange">Orange</option>
  <option value="mt3 w3 h3 bg-gold">Gold</option>
  <option value="mt3 w3 h3 bg-yellow">Yellow</option>
  <option value="mt3 w3 h3 bg-purple">Purple</option>
  <option value="mt3 w3 h3 bg-pink">Pink</option>
  <option value="mt3 w3 h3 bg-green">Green</option>
  <option value="mt3 w3 h3 bg-navy">Navy</option>
  <option value="mt3 w3 h3 bg-blue">Blue</option>
</select>

<div link:class="colorBoxValue"></div>

Pick a value in the dropdown and see the color of the div change.

Resolution-optimized server response

Imagine that you have a database with millions of data points that you would like to display in a line graph.

That already sounds challenging, doesn't it?

This is one of those use cases where reference actions can really come in handy. It does not have to be hard at all.

You don't have to pay in complexity, visual fidelity, accuracy, or performance. 🤯

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p class="mt0">
  The point is not the graph, but the fact that it is a completely normal
  <code>svg</code> element, with no charting libraries or any kind of special
  rendering needed.
</p>

<input
  type="hidden"
  name="chartWidth"
  link:value="referenceChartWidth"
  on:attr:value="sendChartWidth"
  on="sendChartWidth"
  debounce="100"
  src="/reference-chart"
  result="referenceChart"
>

<svg
  class="chart"
  height="500"
  ref:width="referenceChartWidth"
  measure="devicePixelContentBoxSize"
  render="referenceChart"
  position="replaceWith"
></svg>

1
2
3
4
5
  // obtain an absurd number of data points
  // this will be an array with ten million numbers!
  // again, like all the other demos, this is 100% true and 100% real
  // no cutting corners here ;)
  server.series = generateSeries(10_000_000);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{{
  // available area for rendering from the client
  const width = +server.getParam("chartWidth");

  // pick at most the number of available pixels worth of data points
  // this is going to look identical in the UI, but is no longer absurd
  const data = server.sampleSeries(server.series, width);

  // prepare svg compatible values
  const chart = server.generateChart(server.series, data, width, 500);
}}

<svg
  class="chart"
  height="500"
  ref:width="referenceChartWidth"
  measure="devicePixelContentBoxSize"
  render="referenceChart"
  position="replaceWith"
  viewBox="0 0 { width } 500"
>
  <path { chart.path } />

  <line { chart.xAxis } />
  <line { chart.yAxis } />

  {{ for (const tick of chart.xTicks) { }}
    <text { tick.text }>{ tick.label }</text>
    <line { tick.line } />
  {{ } }}

  {{ for (const tick of chart.yTicks) { }}
    <text { tick.text }>{ tick.label }</text>
    <line { tick.line } />
  {{ } }}
</svg>

The point is not the graph, but the fact that it is a completely normal svg element, with no charting libraries or any kind of special rendering needed.