docs/Labs.html

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebPage" lang="en">
<head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <link href="/rules_nodejs/Labs.html" rel="canonical">
  <link href="" rel="shortcut icon" type="image/png">

  <title>rules_nodejs - Labs</title>

  <!-- Webfont -->
  <link href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,500,700|Open+Sans:400,600,700,800" rel="stylesheet">

  <!-- Bootstrap -->
  <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">

  <!-- Font Awesome -->
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Custom stylesheet -->
  <link href="/rules_nodejs/css/main.css" rel="stylesheet">

  <!-- metadata -->
  <meta content="rules_nodejs" name="og:title"/>
  <meta content="JavaScript and NodeJS rules for Bazel" name="og:description"/>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id="common-nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"
              type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/rules_nodejs/">
        <img class="navbar-logo" src="/rules_nodejs/images/bazel-navbar.svg">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-right" action="/rules_nodejs/search.html" id="cse-search-box">
        <div class="form-group">
          <input type="hidden" name="cx" value="2735dc72dd157bd19">
          <input type="search" name="q" id="q" class="form-control input-sm" placeholder="Search">
        </div>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="https://github.com/bazelbuild/rules_nodejs">GitHub</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


<div class="container vpad">
  <div class="row">
    <div class="col-md-2">
  <a aria-controls="sidebar-nav"
     aria-expanded="false" class="btn btn-default btn-lg btn-block sidebar-toggle" data-toggle="collapse"
     href="#sidebar-nav">
    <i class="glyphicon glyphicon-menu-hamburger"></i> Navigation
  </a>

  <nav class="sidebar collapse" id="sidebar-nav">
    <h3>rules_nodejs</h3>
    <ul class="sidebar-nav">
      <li><a href="/rules_nodejs/">Introduction</a></li>
      <li><a href="install.html">Installation</a></li>
      <li><a href="repositories.html">Repositories</a></li>
      <li><a href="dependencies.html">Dependencies</a></li>
      <li><a href="debugging.html">Debugging</a></li>
      <li><a href="stamping.html">Stamping</a></li>
      <li><a href="changing-rules.html">Making changes to rules_nodejs</a></li>
      <li><a href="examples.html">Examples</a></li>
    </ul>

    <h3>Rules</h3>
    <ul class="sidebar-nav">
      
      
      <li><a href="/rules_nodejs/Built-ins.html">Built-ins</a></li>
      
      
      
      <li><a href="/rules_nodejs/Cypress.html">Cypress</a></li>
      
      
      
      <li><a href="/rules_nodejs/Jasmine.html">Jasmine</a></li>
      
      
      
      <li><a href="/rules_nodejs/Karma.html">Karma</a></li>
      
      
      
      <li><a href="/rules_nodejs/Labs.html">Labs</a></li>
      
      
      
      <li><a href="/rules_nodejs/Protractor.html">Protractor</a></li>
      
      
      
      <li><a href="/rules_nodejs/Rollup.html">Rollup</a></li>
      
      
      
      <li><a href="/rules_nodejs/Terser.html">Terser</a></li>
      
      
      
      <li><a href="/rules_nodejs/TypeScript.html">TypeScript</a></li>
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    </ul>

    <h3>Community</h3>
    <ul class="sidebar-nav">
      <li><a href="https://github.com/bazelbuild/rules_nodejs/blob/master/CONTRIBUTING.md">Contribute to
        rules_nodejs</a></li>
      <li><a href="https://slack.bazel.build">Join #javascript on Slack</a></li>
      <li><a href="https://github.com/bazelbuild/rules_nodejs/issues">Issue Tracker</a></li>
      <li><a href="https://github.com/bazelbuild/rules_nodejs">Github</a></li>
    </ul>
  </nav>
</div>


    <div class="col-md-8">
      <div class="content">
        <!-- *********************
  DO NOT EDIT THIS FILE
  It is a generated build output from Stardoc.
  Instead you must edit the .bzl file where the rules are declared,
  or possibly a markdown file next to the .bzl file
 ********************* -->
<h1 id="bazel-nodejs-labs">Bazel nodejs Labs</h1>

<p>This package contains experimental code which isn’t at the same quality or stability standard as our main packages.</p>

<p>By using code in Labs, we trust that you understand:</p>

<ul>
  <li>It might be deleted at any time</li>
  <li>We offer no support guarantees for using it</li>
  <li>Breaking changes can happen in any release</li>
  <li>We could release with bugs or other brokenness</li>
  <li>Documentation is sparse</li>
</ul>

<h2 id="protobufjs_ts_library">protobufjs_ts_library</h2>

<p><strong>USAGE</strong></p>

<pre>
protobufjs_ts_library(<a href="#protobufjs_ts_library-name">name</a>, <a href="#protobufjs_ts_library-deps">deps</a>, <a href="#protobufjs_ts_library-output_name">output_name</a>)
</pre>

<p>Wraps https://github.com/dcodeIO/protobuf.js for use in Bazel.</p>

<p><code class="language-plaintext highlighter-rouge">ts_proto_library</code> has identical outputs to <code class="language-plaintext highlighter-rouge">ts_library</code>, so it can be used anywhere
a <code class="language-plaintext highlighter-rouge">ts_library</code> can appear, such as in the <code class="language-plaintext highlighter-rouge">deps[]</code> of another <code class="language-plaintext highlighter-rouge">ts_library</code>.</p>

<p>Example:</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/typescript:index.bzl"</span><span class="p">,</span> <span class="s">"ts_library"</span><span class="p">,</span> <span class="s">"ts_proto_library"</span><span class="p">)</span>

<span class="n">proto_library</span><span class="p">(</span>
    <span class="n">name</span> <span class="o">=</span> <span class="s">"car_proto"</span><span class="p">,</span>
    <span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"car.proto"</span><span class="p">],</span>
<span class="p">)</span>

<span class="n">ts_proto_library</span><span class="p">(</span>
    <span class="n">name</span> <span class="o">=</span> <span class="s">"car"</span><span class="p">,</span>
    <span class="n">deps</span> <span class="o">=</span> <span class="p">[</span><span class="s">":car_proto"</span><span class="p">],</span>
<span class="p">)</span>

<span class="n">ts_library</span><span class="p">(</span>
    <span class="n">name</span> <span class="o">=</span> <span class="s">"test_lib"</span><span class="p">,</span>
    <span class="n">testonly</span> <span class="o">=</span> <span class="bp">True</span><span class="p">,</span>
    <span class="n">srcs</span> <span class="o">=</span> <span class="p">[</span><span class="s">"car.spec.ts"</span><span class="p">],</span>
    <span class="n">deps</span> <span class="o">=</span> <span class="p">[</span><span class="s">":car"</span><span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>

<p>Note in this example we named the <code class="language-plaintext highlighter-rouge">ts_proto_library</code> rule <code class="language-plaintext highlighter-rouge">car</code> so that the
result will be <code class="language-plaintext highlighter-rouge">car.d.ts</code>. This means our TypeScript code can just
<code class="language-plaintext highlighter-rouge">import {symbols} from './car'</code>. Use the <code class="language-plaintext highlighter-rouge">output_name</code> attribute if you want to
name the rule differently from the output file.</p>

<p>The JavaScript produced by protobuf.js has a runtime dependency on a support library.
Under devmode (e.g. <code class="language-plaintext highlighter-rouge">ts_devserver</code>, <code class="language-plaintext highlighter-rouge">karma_web_test_suite</code>) you’ll need to include these scripts
in the <code class="language-plaintext highlighter-rouge">bootstrap</code> phase (before Require.js loads). You can use the label
<code class="language-plaintext highlighter-rouge">@npm//@bazel/labs/protobufjs:bootstrap_scripts</code> to reference these scripts
in the <code class="language-plaintext highlighter-rouge">bootstrap</code> attribute of <code class="language-plaintext highlighter-rouge">karma_web_test_suite</code> or <code class="language-plaintext highlighter-rouge">ts_devserver</code>.</p>

<p>To complete the example above, you could write a <code class="language-plaintext highlighter-rouge">karma_web_test_suite</code>:</p>

<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">load</span><span class="p">(</span><span class="s">"@npm//@bazel/karma:index.bzl"</span><span class="p">,</span> <span class="s">"karma_web_test_suite"</span><span class="p">)</span>

<span class="n">karma_web_test_suite</span><span class="p">(</span>
    <span class="n">name</span> <span class="o">=</span> <span class="s">"test"</span><span class="p">,</span>
    <span class="n">deps</span> <span class="o">=</span> <span class="p">[</span><span class="s">"test_lib"</span><span class="p">],</span>
    <span class="n">bootstrap</span> <span class="o">=</span> <span class="p">[</span><span class="s">"@npm//@bazel/labs/protobufjs:bootstrap_scripts"</span><span class="p">],</span>
    <span class="n">browsers</span> <span class="o">=</span> <span class="p">[</span>
        <span class="s">"@io_bazel_rules_webtesting//browsers:chromium-local"</span><span class="p">,</span>
        <span class="s">"@io_bazel_rules_webtesting//browsers:firefox-local"</span><span class="p">,</span>
    <span class="p">],</span>
<span class="p">)</span>
</code></pre></div></div>

<p><strong>ATTRIBUTES</strong></p>

<h4 id="protobufjs_ts_library-name">name</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this target.</p>

<h4 id="protobufjs_ts_library-deps">deps</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">List of labels</a></em>): proto_library targets</p>

<p>Defaults to <code class="language-plaintext highlighter-rouge">[]</code></p>

<h4 id="protobufjs_ts_library-output_name">output_name</h4>

<p>(<em>String</em>): Name of the resulting module, which you will import from.
            If not specified, the name will match the target’s name.</p>

<p>Defaults to <code class="language-plaintext highlighter-rouge">""</code></p>

<h2 id="ts_proto_library">ts_proto_library</h2>

<p><strong>USAGE</strong></p>

<pre>
ts_proto_library(<a href="#ts_proto_library-name">name</a>, <a href="#ts_proto_library-proto">proto</a>)
</pre>

<p><strong>ATTRIBUTES</strong></p>

<h4 id="ts_proto_library-name">name</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#name">Name</a>, mandatory</em>): A unique name for this target.</p>

<h4 id="ts_proto_library-proto">proto</h4>

<p>(<em><a href="https://bazel.build/docs/build-ref.html#labels">Label</a>, mandatory</em>)  The dependencies of this attribute must provide: ProtoInfo</p>


      </div>
    </div>

    <div class="col-md-2 sticky-sidebar">
      <div class="right-sidebar">
        <ul class="gh-links">
          <li>
            <i class="fa fa-github"></i>
            <a href="https://github.com/bazelbuild/rules_nodejs/issues/new?title=Documentation issue: Labs&labels=question/docs">Create
              issue</a>
          </li>
          
        </ul>
        <ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#protobufjs_ts_library">protobufjs_ts_library</a></li>
<li class="toc-entry toc-h2"><a href="#ts_proto_library">ts_proto_library</a></li>
</ul>
      </div>
    </div>
  </div>
</div>

<footer class="footer">
  <div class="container">
  <div class="row">
    <div class="col-lg-8">
      <p class="text-muted">&copy; 2020 The rules_nodejs authors</p>
    </div>
  </div>
</div>

</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script crossorigin="anonymous"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Anchor JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.0/anchor.min.js" type="text/javascript"></script>
<script>
  // Automatically add anchors and links to all header elements that don't already have them.
  anchors.options = { placement: 'left' };
  anchors.add();
</script>

<script>
  var shiftWindow = function () {
    if (location.hash.length !== 0) {
      window.scrollBy(0, -50);
    }
  };
  window.addEventListener("hashchange", shiftWindow);

  var highlightCurrentSidebarNav = function () {
    var href = location.pathname;
    var item = $('#sidebar-nav [href$="' + href + '"]');
    if (item) {
      var li = item.parent();
      li.addClass("active");

      if (li.parent() && li.parent().is("ul")) {
        do {
          var ul = li.parent();
          if (ul.hasClass("collapse")) {
            ul.collapse("show");
          }
          li = ul.parent();
        } while (li && li.is("li"));
      }
    }
  };

  $(document).ready(function () {
    // Scroll to anchor of location hash, adjusted for fixed navbar.
    window.setTimeout(function () {
      shiftWindow();
    }, 1);

    // Flip the caret when submenu toggles are clicked.
    $(".sidebar-submenu").on("show.bs.collapse", function () {
      var toggle = $('[href$="#' + $(this).attr('id') + '"]');
      if (toggle) {
        toggle.addClass("dropup");
      }
    });
    $(".sidebar-submenu").on("hide.bs.collapse", function () {
      var toggle = $('[href$="#' + $(this).attr('id') + '"]');
      if (toggle) {
        toggle.removeClass("dropup");
      }
    });

    // Highlight the current page on the sidebar nav.
    highlightCurrentSidebarNav();
  });
</script>

</body>
</html>