@furo/precompiled #

The @furo/precompiled package is for those who want to use the furo componetnt directly in HTML. There is no build step needed. It is a convenient way to use the components to prototype some ideas or just play around with FBP without a complex installation procedure. When you know that your ideas work, transfer them 1:1 to a web component, so others can install, use and extend them.

Look at the sample folder in the repo to see an example of what is possible.

Note This package was created to teach furo FBP and for creating our demos, so we can use and show our components in a HUGO generated page. Some of the files are very big at the moment, because they are not optimized for file size yet.

This documentation uses @furo/precompiled at any place where you can see a [demo/source/flow] panel. All that was needed was to load the precompiled scripts via CDN.

 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


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <!-- This module contains the light bulb -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.0.0-rc.16/dist/doc-helper.js"></script>
  <script>
    import(
      "https://cdn.jsdelivr.net/npm/@furo/precompiled@2.0.0-rc.16/dist/DOMFBP.js"
      ).then(() => {
      // activate FBP on body
      const fbphandle = new DOMFBP(document.body);
      // enable tracing
      fbphandle._FBPTraceWires();
    });
  </script>

  <title>Static Template</title>
</head>
<body>
  <h1>This is a static template, there is no bundler or bundling involved!</h1>
  
  <light-bulb fn-toggle="--lightSwitchClicked"></light-bulb>
  <button at-click="--lightSwitchClicked">i am a lightswitch</button>
</body>
</html>

Compatibility Table #

This compatibility list is only meant for the precompiled components.

compat