How to use the compileClientWithDependenciesTracked function from pug

Find comprehensive JavaScript pug.compileClientWithDependenciesTracked code examples handpicked from public code repositorys.

pug.compileClientWithDependenciesTracked compiles a Pug template to a JavaScript function, tracking its dependencies for efficient caching, and returns the code as a string.

reference.md?plain=1

148
149
150
151
152
153
154
155
156
157
// Render the function
var html = fn(locals);
// => 'function template(locals) { return "<string>of pug</string>"; }'
```

### pug.compileClientWithDependenciesTracked(source, ?options)

Same as <code>[compileClient]</code> except that this method returns an object of the form:

```js

index.js

GitHub: sidorares/pugify

173
174
175
176
177
178
179
180
181
182

function compile(file, template, options) {
    options.filename = file;
    options.name = "template";
    var result;
    result = pug.compileClientWithDependenciesTracked(template, options);
    if (options.compileDebug)
        result.body = withSourceMap(template, result.body, file);

    var PREFIX = "var pug = require('"+(options.runtimePath === undefined ? "pug-runtime" : options.runtimePath)+"');\nmodule.exports=template;";

How does pug.compileClientWithDependenciesTracked work?

pug.compileClientWithDependenciesTracked is a method in the Pug templating engine library for Node.js that compiles a Pug template into a JavaScript function with dependencies tracked. The resulting JavaScript function can be used to render the template on the client-side in a web browser.

index.js

GitHub: aMarCruz/pugjs-brunch

72
73
74
75
76
77
78
79
80
const dbg = options.compileDebug
if (config.sourceMap) {
  options.compileDebug = true
}

const res = pug.compileClientWithDependenciesTracked(data, options)
this._setDeps(path, res)

let result = this._export(path, res.body)

index.js

GitHub: webdiscus/pug-loader

304
305
306
307
308
309
310
311
312
313
  watchFiles: loaderOptions.watchFiles,
});

try {
  /** @type {{body: string, dependencies: []}} */
  compileResult = pug.compileClientWithDependenciesTracked(content, compilerOptions).body;

  // Note: don't use compileResult.dependencies because it is not available by compile error.
  // The Pug loader tracks all dependencies during compilation and stores them in `Dependency` instance.
} catch (error) {

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
const pug = require("pug");

const templateString = "div Hello, #{name}!";
const options = { pretty: true };

const { body, dependencies } = pug.compileClientWithDependenciesTracked(
  templateString,
  options
);

console.log("Compiled function:", body);
console.log("Dependencies:", dependencies);

In this example, the pug.compileClientWithDependenciesTracked function is used to compile a Pug template string into a JavaScript function. The options parameter is used to configure the output format of the generated JavaScript code. The function returns an object with two properties: body: The generated JavaScript function as a string. dependencies: An array of file paths that the generated JavaScript function depends on, such as Pug mixins or included templates. The generated function can be used on the client-side to render the template with data.

index.js

GitHub: jstransformers/jstransformer-pug

12
13
14
15
16
17
18
19
20
21
    dependencies: fn.dependencies
  }
}

exports.compileClient = function (source, options) {
  return pug.compileClientWithDependenciesTracked(source, options)
}

exports.compileFile = function (path, options) {
  const fn = pug.compileFile(path, options)

index.js

GitHub: mikesamuel/pug-plugin-trusted-types

13
14
15
16
17
18
19
20
21
22
function compilePugToModule(code, filename) {
  const optionsForFile = assign(
    create(null),
    { filename },
    config);
  const { body } = compileClientWithDependenciesTracked(code, optionsForFile);
  let name = `${ optionsForFile.name || 'template' }`;
  if (!/^\w+$/.test(name)) {
    name = 'template';
    optionsForFile.name = name;

index.js

GitHub: RobLoach/jstransformer-pug

7
8
9
10
11
12
13
14
15
16
exports.compile = function (source, options) {
  var fn = pug.compile(source, options);
  return {fn: fn, dependencies: fn.dependencies}
};
exports.compileClient = function (source, options) {
  return pug.compileClientWithDependenciesTracked(source, options);
};
exports.compileFile = function (path, options) {
  var fn = pug.compileFile(path, options);
  return {fn: fn, dependencies: fn.dependencies}

compile-static-templates.js

GitHub: decaffeinate-examples/codecombat

19
20
21
22
23
24
25
26
27
28
const compile = function(contents, locals, filename, cb) {
  // console.log "Compile", filename, basePath
  let str;
  const outFile = filename.replace(/.static.pug$/, '.html');
  // console.log {outFile, filename, basePath}
  let out = pug.compileClientWithDependenciesTracked(contents, {
    filename: path.join(basePath, 'templates/static', filename),
    basedir: basePath
  }
  );

index.js

GitHub: trenskow/donot-transform-pug

24
25
26
27
28
29
30
31
32
33
        return filename.replace(/(?:\.min)?\.(html|htm)$/i, '.pug');
}

compile(filename, data, map, options) {
        return new Promise((resolved, rejected) => {
                var fn = pug.compileClientWithDependenciesTracked(data.toString(), {
                        filename: filename,
                        cache: false,
                        pretty: /\.min\.(html|html)$/i.test(filename)
                });

Other functions in pug

Sorted by popularity

pug.compileFile is the most popular function in pug (496 examples)

Other popular packages:

Home

About