- <link rel="shortcut icon" href="../../assets/default.favicon.ico">
- <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.3">
+ <link rel="icon" href="../../assets/default.favicon.ico">
+ <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.0">
- <link rel="stylesheet" href="../../assets/stylesheets/main.1655a90d.min.css">
+ <link rel="stylesheet" href="../../assets/stylesheets/main.33e2939f.min.css">
- <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
+ <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
-
+
+
<link rel="stylesheet" href="../../stylesheets/extra.css">
<body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
-
+ <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
+
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
</div>
-
-
-<header class="md-header" data-md-component="header">
+ <header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
- <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
+ <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
<img src="../../assets/logo.png" alt="logo">
</div>
</div>
</div>
- <div class="md-header__options">
-
- </div>
+
+
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</label>
<button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
</form>
<div class="md-search__output">
</div>
+ <div class="md-header__source">
+
+<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
+ <div class="md-source__icon md-icon">
+
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+ </div>
+ <div class="md-source__repository">
+ GitHub
+ </div>
+</a>
+ </div>
+
</nav>
</header>
-
-
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
- <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
+ <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
<img src="../../assets/logo.png" alt="logo">
WoltLab Suite Documentation
</label>
+ <div class="md-nav__source">
+
+<a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
+ <div class="md-source__icon md-icon">
+
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
+ </div>
+ <div class="md-source__repository">
+ GitHub
+ </div>
+</a>
+ </div>
+
<ul class="md-nav__list" data-md-scrollfix>
+
+ <li class="md-nav__item md-nav__item--nested">
+
+
+ <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
+
+ <label class="md-nav__link" for="__nav_2_5_1">
+ Caches
+ <span class="md-nav__icon md-icon"></span>
+ </label>
+ <nav class="md-nav" aria-label="Caches" data-md-level="3">
+ <label class="md-nav__title" for="__nav_2_5_1">
+ <span class="md-nav__icon md-icon"></span>
+ Caches
+ </label>
+ <ul class="md-nav__list" data-md-scrollfix>
+
+
+
+
+
<li class="md-nav__item">
<a href="../../php/api/caches/" class="md-nav__link">
- Caches
+ Overview
+ </a>
+ </li>
+
+
+
+
+
+
+
+ <li class="md-nav__item">
+ <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
+ Persistent Caches
</a>
</li>
+ <li class="md-nav__item">
+ <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
+ Runtime Caches
+ </a>
+ </li>
+
+
+
+ </ul>
+ </nav>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../php/api/comments/" class="md-nav__link">
Comments
+ <li class="md-nav__item">
+ <a href="../../view/template-plugins/" class="md-nav__link">
+ Template Plugins
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../view/css/" class="md-nav__link">
CSS
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
<label class="md-nav__link" for="__nav_4">
- JavaScript API
+ TypeScript and JavaScript API
<span class="md-nav__icon md-icon"></span>
</label>
- <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
+ <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
- JavaScript API
+ TypeScript and JavaScript API
</label>
<ul class="md-nav__list" data-md-scrollfix>
+ <li class="md-nav__item">
+ <a href="../typescript/" class="md-nav__link">
+ TypeScript
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item md-nav__item--nested">
- <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" >
+ <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
- <label class="md-nav__link" for="__nav_4_2">
+ <label class="md-nav__link" for="__nav_4_3">
New API
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" aria-label="New API" data-md-level="2">
- <label class="md-nav__title" for="__nav_4_2">
+ <label class="md-nav__title" for="__nav_4_3">
<span class="md-nav__icon md-icon"></span>
New API
</label>
+ <li class="md-nav__item">
+ <a href="../../package/pip/database/" class="md-nav__link">
+ database
+ </a>
+ </li>
+
+
+
+
+
+
+
<li class="md-nav__item">
<a href="../../package/pip/event-listener/" class="md-nav__link">
eventListener
<li class="md-nav__item">
<a href="../../migration/wsc53/javascript/" class="md-nav__link">
- JavaScript
+ TypeScript and JavaScript
</a>
</li>
+
+
+
+
+ <li class="md-nav__item">
+ <a href="../../tutorial/series/part_4/" class="md-nav__link">
+ Part 4
+ </a>
+ </li>
+
+
+
</ul>
</nav>
</li>
<article class="md-content__inner md-typeset">
+ <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/general-usage.md" title="Edit this page" class="md-content__button md-icon">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
+ </a>
+
<h1 id="general-javascript-usage">General JavaScript Usage<a class="headerlink" href="#general-javascript-usage" title="Permanent link">#</a></h1>
+<div class="admonition info">
+<p class="admonition-title">WoltLab Suite 5.4 introduced support for TypeScript, migrating all existing modules to TypeScript. The JavaScript section of the documentation is not yet updated to account for the changes, possibly explaining concepts that cannot be applied as-is when writing TypeScript. You can learn about basic TypeScript use in WoltLab Suite, such as consuming WoltLab Suite’s types in own packages, within in <a href="../typescript/">the TypeScript section</a>.</p>
+</div>
<h2 id="the-history-of-the-legacy-api">The History of the Legacy API<a class="headerlink" href="#the-history-of-the-legacy-api" title="Permanent link">#</a></h2>
<p>The WoltLab Suite 3.0 <a href="../new-api_writing-a-module/">introduced a new API</a> based on AMD-Modules
with ES5-JavaScript that was designed with high performance and visible dependencies
<p>The <code>hasTiny</code> attribute is optional, you can set it to <code>false</code> or just omit it
entirely if you do not provide a tiny build for your file.</p>
+
+
+
+<hr>
+<div class="md-source-date">
+ <small>
+
+ Last update: 2021-04-13
+
+ </small>
+</div>
+
+
</article>
</div>
</div>
+
</main>
</a>
- <a href="../new-api_writing-a-module/" class="md-footer__link md-footer__link--next" rel="next">
+ <a href="../typescript/" class="md-footer__link md-footer__link--next" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
- Writing a module
+ TypeScript
</div>
</div>
<div class="md-footer__button md-icon">
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
+
</div>
<div class="md-footer-copyright">
<a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
- <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
+ <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
- <script src="../../assets/javascripts/bundle.ca5457b8.min.js"></script>
+ <script src="../../assets/javascripts/bundle.d892486b.min.js"></script>
</body>
projects / GitHub / WoltLab / woltlab.github.io.git / blobdiff