Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'vinyl-file' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
/* global describe it */
const should = require('should');
const assert = require('stream-assert');
const path = require('path');
const fs = require('fs');
const vinyl = require('vinyl-file');
const gulp = require('gulp');
const shortbread = require('../');
require('mocha');
const js = vinyl.readSync(path.join(__dirname, 'fixtures/script.js'));
const jsHash = shortbread.createHash(js.contents.toString());
const jsUrl = 'https://example.com/script.js';
const jsUrlHash = shortbread.createHash(jsUrl);
const css = vinyl.readSync(path.join(__dirname, 'fixtures/style.css'));
const cssHash = shortbread.createHash(css.contents.toString());
const cssUrl = 'https://example.com/style.css';
const cssUrlHash = shortbread.createHash(cssUrl);
describe('shortbread()', () => {
it('should ignore null files', () => {
const result = shortbread();
should(result).be.Object();
should(result.initial).be.empty();
should(result.subsequent).be.empty();
should(Object.keys(result.resources)).be.empty();
should(result.hash).be.null();
const path = require('path');
const shortbread = require('../..');
const vinyl = require('vinyl-file');
const fs = require('fs-extra');
const handlebars = require('handlebars');
// Prepare the output directory
fs.mkdirsSync(path.join(__dirname, '../tmp'));
const criticalCSS = vinyl.readSync(path.join(__dirname, '../fixtures/critical.css'));
const criticalJS = vinyl.readSync(path.join(__dirname, '../fixtures/critical.js'));
criticalJS.path = `${criticalJS.base}/index.php?asset=critical.js`;
const script = vinyl.readSync(path.join(__dirname, '../fixtures/script.js'));
script.path = `${script.base}/index.php?asset=script.js`;
const js = [criticalJS, script];
const style = vinyl.readSync(path.join(__dirname, '../fixtures/style.css'));
style.path = `${style.base}/index.php?asset=style.css`;
const css = [style];
const result = shortbread(js, css, [criticalCSS, criticalJS], 'main', 'allLoaded');
// Compile and store the PHP test file
const hbs = fs.readFileSync(path.join(__dirname, 'index.hbs'));
const template = handlebars.compile(hbs.toString());
const php = template(result);
fs.mkdirsSync(path.join(__dirname, '../../tmp'));
fs.writeFileSync(path.join(__dirname, '../../tmp/index.php'), php);
function getManifestFile(opts, cb) {
file.read(opts.path, opts, function (err, manifest) {
if (err) {
// not found
if (err.code === 'ENOENT') {
cb(null, new gutil.File(opts));
} else {
cb(err);
}
return;
}
cb(null, manifest);
});
}
static async load(
name: string,
filePath: PathOsBased,
consumerPath: PathOsBased,
base: PathOsBased = consumerPath,
extendedProps?: Record
): Promise {
try {
const baseFile = await vinylFile.read(filePath, { base, cwd: consumerPath });
// @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
const file = new ExtensionFile(baseFile);
file.name = name;
// @ts-ignore AUTO-ADDED-AFTER-MIGRATION-PLEASE-FIX!
file.file = Source.from(file.contents);
const addToFile = (value, key) => (file[key] = value); /* eslint-disable-line no-return-assign */
R.forEachObjIndexed(addToFile, extendedProps);
return file;
} catch (err) {
logger.error(`failed loading file ${filePath}. Error: ${err}`);
if (err.code === 'ENOENT' && err.path) {
throw new ExtensionFileNotFound(err.path);
}
throw err;
}
}
function getManifestFile(opts, cb) {
file.read(opts.path, opts, function (err, manifest) {
if (err) {
// not found
if (err.code === 'ENOENT') {
cb(null, new gutil.File(opts));
} else {
cb(err);
}
return;
}
cb(null, manifest);
});
}
gulp.task('default', (done) => {
const criticalJS = vinyl.readSync('test/fixtures/critical.js');
const criticalCSS = vinyl.readSync('test/fixtures/critical.css');
const tmpl = filter(['**/*.php'], { restore: true });
// Start with your JavaScript, CSS and template resources
gulp.src(['**/fixtures/*.js', '**/fixtures/style.css', 'gulp/*.php'], { cwd: path.join(__dirname, 'test') })
// Run shortbread
.pipe(shortbread([criticalJS, criticalCSS], 'main', null, { prefix: '/' }))
// Filter all but the template file
.pipe(tmpl)
// Run the template engine
.pipe(template())
// Restore all files
static load(
filePath: PathOsBased,
distTarget: PathOsBased,
base: PathOsBased = consumerPath, // TODO: change params order to fix lint error
consumerPath: PathOsBased,
extendedProps: Object
): SourceFile | null {
try {
const file = new SourceFile(vinylFile.readSync(filePath, { base, cwd: consumerPath }));
const addToFile = (value, key) => (file[key] = value); /* eslint-disable-line no-return-assign */
R.forEachObjIndexed(addToFile, extendedProps);
return file;
} catch (err) {
logger.errorAndAddBreadCrumb(
'source-file.load',
'failed loading file {filePath}. Error: {message}',
{ filePath, message: err.message },
err
);
if (err.code === 'ENOENT' && err.path) {
throw new FileSourceNotFound(err.path);
}
throw err;
}
}
gulp.task('default', (done) => {
const criticalJS = vinyl.readSync('test/fixtures/critical.js');
const criticalCSS = vinyl.readSync('test/fixtures/critical.css');
const tmpl = filter(['**/*.php'], { restore: true });
// Start with your JavaScript, CSS and template resources
gulp.src(['**/fixtures/*.js', '**/fixtures/style.css', 'gulp/*.php'], { cwd: path.join(__dirname, 'test') })
// Run shortbread
.pipe(shortbread([criticalJS, criticalCSS], 'main', null, { prefix: '/' }))
// Filter all but the template file
.pipe(tmpl)
// Run the template engine
.pipe(template())
// Restore all files
.pipe(tmpl.restore)
describe('should support options', () => {
const criticalcss = vinyl.readSync(path.join(__dirname, 'fixtures/critical.css'));
const criticaljs = vinyl.readSync(path.join(__dirname, 'fixtures/script.js'));
it('critical CSS & JavaScript', (done) => {
gulp.src(['fixtures/*.js', 'fixtures/style.css'], { cwd: __dirname })
.pipe(shortbread.stream([criticalcss, criticaljs]))
.pipe(assert.length(2))
.pipe(assert.nth(0, (d) => {
should(path.basename(d.path)).eql('initial.html');
should(d.contents.toString()).match(/criticalcss/);
should(d.contents.toString()).match(/criticaljs/);
}))
.pipe(assert.nth(1, (d) => {
should(path.basename(d.path)).eql('subsequent.html');
}))
.pipe(assert.end(done));
});
describe('should support options', () => {
const criticalcss = vinyl.readSync(path.join(__dirname, 'fixtures/critical.css'));
const criticaljs = vinyl.readSync(path.join(__dirname, 'fixtures/script.js'));
it('critical CSS & JavaScript', (done) => {
gulp.src(['fixtures/*.js', 'fixtures/style.css'], { cwd: __dirname })
.pipe(shortbread.stream([criticalcss, criticaljs]))
.pipe(assert.length(2))
.pipe(assert.nth(0, (d) => {
should(path.basename(d.path)).eql('initial.html');
should(d.contents.toString()).match(/criticalcss/);
should(d.contents.toString()).match(/criticaljs/);
}))
.pipe(assert.nth(1, (d) => {
should(path.basename(d.path)).eql('subsequent.html');
}))
.pipe(assert.end(done));
});
it('file extension filters', (done) => {