GLUON / DOCS Playground

@gluonjs/compiler

@gluonjs/compiler / packages/compiler/src / compileGluonSfc

Function: compileGluonSfc()

compileGluonSfc(source, options): GluonSfcCompileResult

Compiles a presentational .gluon Single-File Component to ordinary public Gluon component, Quark, template, and constructable stylesheet contracts.

Parameters

source

string

options

GluonSfcCompileOptions

Returns

GluonSfcCompileResult

Example

Lower one presentational .gluon file to ordinary public component, Quark, template, and constructable stylesheet calls:

ts
import {
  GluonSfcCompileError,
  compileGluonSfc,
  type GluonSfcCompileOptions,
  type GluonSfcCompileResult,
  type GluonSfcLayer,
} from '@gluonjs/compiler';

const source = `
<script lang="ts">
export interface BadgeProps { readonly label: string; }
</script>
<template component="Badge" layer="atom" props="BadgeProps">
  <strong>{{ label }}</strong>
</template>
<style id="docs-badge">.docs-badge { font-weight: 600; }</style>
`;
const options = { filename: '/src/Badge.gluon' } satisfies GluonSfcCompileOptions;
try {
  const result: GluonSfcCompileResult = compileGluonSfc(source, options);
  const layer: GluonSfcLayer = result.layer;
  console.log(result.componentName, layer, result.styleId, result.code);
} catch (error) {
  if (error instanceof GluonSfcCompileError) console.error(error.code, error.filename);
}