ScarletsFrame Compiler

0.7.2 verified Fri May 01 auth: no javascript

A Gulp-based compiler for ScarletsFrame, a framework for building web components with .sf files. Version 0.7.2 is the latest stable release. It compiles .sf files into JavaScript, CSS, and HTML, and integrates with BrowserSync for live reloading. Differentiators include a macro system for appending HTML to body and file path injection via #this.path. The project appears to be low-maintenance with infrequent updates.

Common errors

error Error: Cannot find module 'scarletsframe-compiler' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install scarletsframe-compiler --save-dev

error gulp.series is not a function ↓

cause Using gulp 3.x which does not have gulp.series; requires gulp 4+.

fix

Upgrade to gulp 4: npm install gulp@4 --save-dev

error TypeError: sfcompiler is not a function ↓

cause Wrong import style (ESM default import instead of CommonJS).

fix

Use const sfcompiler = require('scarletsframe-compiler');

error ReferenceError: window is not defined ↓

cause Browser-specific code used in Node.js context (e.g., BrowserSync).

fix

Ensure you are not using browser-only APIs in .sf files that are processed server-side.

Warnings

gotcha Requires Gulp and BrowserSync as peer dependencies; not a standalone compiler. ↓

fix Install gulp and browser-sync as devDependencies.

gotcha No ESM exports; only CommonJS require works. ↓

fix Use require instead of import statements.

breaking API changes between 0.5.x and 0.6.x may break existing gulpfile configurations. ↓

fix Check changelog for migration steps.

deprecated The #this.path injection in JavaScript macros is a non-standard feature; may be removed in future versions. ↓

fix Use alternative template engines or avoid relying on it.

gotcha Windows users must set text encoding to Unix (LF) in Sublime Text to avoid compilation issues. ↓

fix Change line endings to LF in your editor.

Install

npm install scarletsframe-compiler

yarn add scarletsframe-compiler

pnpm add scarletsframe-compiler

Imports

default

wrong

import sfcompiler from 'scarletsframe-compiler';

correct

const sfcompiler = require('scarletsframe-compiler');

Package does not provide ESM exports; use CommonJS require.

sfcompiler

wrong

const sfcompiler = require('scarletsframe-compiler').default;

correct

const sfcompiler = require('scarletsframe-compiler');

No default export; the module itself is the compiler.

Gulp tasks

const { task } = require('gulp');
const sfcompiler = require('scarletsframe-compiler');

The package exposes Gulp tasks; no specific function exports documented.

Quickstart

Shows how to set up a Gulp task using scarletsframe-compiler to compile .sf files and serve with BrowserSync.

// Install dependencies
// npm install gulp browser-sync scarletsframe-compiler --save-dev

// gulpfile.js
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sfcompiler = require('scarletsframe-compiler');

// Use sfcompiler to define tasks (example from default template)
gulp.task('compile', function() {
  return gulp.src('src/**/*.sf')
    .pipe(sfcompiler())
    .pipe(gulp.dest('dist'));
});

gulp.task('serve', function() {
  browserSync.init({
    server: { baseDir: './' }
  });
  gulp.watch('src/**/*.sf', gulp.series('compile')).on('change', browserSync.reload);
});

gulp.task('default', gulp.series('compile', 'serve'));