From 79f74c840234bdb51bbb54f6191bda1ed35bfb21 Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 08:03:31 +0900 Subject: [PATCH] Add test code --- svg-sprite/svg-sprite-tests.ts | 310 ++++++++++++++++++++++++++++++++- svg-sprite/svg-sprite.d.ts | 78 ++++++--- 2 files changed, 364 insertions(+), 24 deletions(-) diff --git a/svg-sprite/svg-sprite-tests.ts b/svg-sprite/svg-sprite-tests.ts index 2a927998c..74097962f 100644 --- a/svg-sprite/svg-sprite-tests.ts +++ b/svg-sprite/svg-sprite-tests.ts @@ -3,7 +3,12 @@ import SVGSpriter = require('svg-sprite'); import * as fs from 'fs'; -var config: any = null; +var config: SVGSpriter.Config; + + +// +// README.md +// // Create spriter instance (see below for `config` examples) var spriter = new SVGSpriter(config); @@ -17,3 +22,306 @@ spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encod spriter.compile(function(error: any, result: any) { /* ... Write `result` files to disk or do whatever with them ... */ }); + +// General configuration options + +config = { + dest : '.', // Main output directory + log : null, // Logging verbosity (default: no logging) + shape : { // SVG shape related options + id : { // SVG shape ID related options + separator : '--', // Separator for directory name traversal + generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback + pseudo : '~' // File name separator for shape states (e.g. ':hover') + }, + dimension : { // Dimension related options + maxWidth : 2000, // Max. shape width + maxHeight : 2000, // Max. shape height + precision : 2, // Floating point precision + attributes : false, // Width and height attributes on embedded shapes + }, + spacing : { // Spacing related options + padding : 0, // Padding around all shapes + box : 'content' // Padding strategy (similar to CSS `box-sizing`) + }, + transform : ['svgo'], // List of transformations / optimizations + meta : null, // Path to YAML file with meta / accessibility data + align : null, // Path to YAML file with extended alignment data + dest : null // Output directory for optimized intermediate SVG shapes + }, + svg : { // General options for created SVG files + xmlDeclaration : true, // Add XML declaration to SVG sprite + doctypeDeclaration : true, // Add DOCTYPE declaration to SVG sprite + namespaceIDs : true, // Add namespace token to all IDs in SVG shapes + dimensionAttributes : true // Width and height attributes on the sprite + }, + variables : {} // Custom Mustache templating variables and functions +}; + +// Output modes + +config = { + mode : { + css : true, // Create a «css» sprite + view : true, // Create a «view» sprite + defs : true, // Create a «defs» sprite + symbol : true, // Create a «symbol» sprite + stack : true // Create a «stack» sprite +} +}; + +config = { + mode: { + css: { + // Configuration for the «css» sprite + // ... + } + } +}; + +// Common mode properties + +config = { + mode : { + mode1 : { + dest : "", // Mode specific output directory + prefix : "svg-%s", // Prefix for CSS selectors + dimensions : "-dims", // Suffix for dimension CSS selectors + sprite : "svg/sprite..svg", // Sprite path and name + bust : true, // Cache busting (mode dependent default value) + render : { // Stylesheet rendering definitions + /* ------------------------------------------- + css : false, // CSS stylesheet options + scss : false, // Sass stylesheet options + less : false, // LESS stylesheet options + styl : false // Stylus stylesheet options + : ... // Custom stylesheet options + ------------------------------------------- */ + }, + example : false // Create an HTML example document +} +} +}; + +// Basic examples + +// A.) Standalone sprite + +config = { + mode : { + inline : true, // Prepare for inline embedding + symbol : true // Create a «symbol» sprite +} +}; + +// B.) CSS sprite with Sass resource + +config = { + mode : { + css : { // Create a «css» sprite + render : { + scss : true // Render a Sass stylesheet + } +} +} +}; + +// C.) Multiple sprites + +config = { + mode : { + defs : true, + symbol : true, + stack : true +} +}; + +// D.) No sprite at all + +config = { + shape : { + dest : 'path/to/out/dir' +} +}; + + + +// +// docs/configuration.md +// + +config = { + shape : { + id : { // SVG shape ID related options + separator : '--', // Separator for directory name traversal + generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback + pseudo : '~', // File name separator for shape states (e.g. ':hover') + whitespace : '_' // Whitespace replacement for shape IDs + }, + dimension : { // Dimension related options + maxWidth : 2000, // Max. shape width + maxHeight : 2000, // Max. shape height + precision : 2, // Floating point precision + attributes : false, // Width and height attributes on embedded shapes + }, + spacing : { // Spacing related options + padding : 0, // Padding around all shapes + box : 'content' // Padding strategy (similar to CSS `box-sizing`) + }, + transform : ['svgo'], // List of transformations / optimizations + meta : null, // Path to YAML file with meta / accessibility data + align : null, // Path to YAML file with extended alignment data + dest : null // Output directory for optimized intermediate SVG shapes + } +}; + +config = // SVGO transformation with default configuration +{ + shape : { + transform : ['svgo'] + /* ... */ + } +}; + +config = // Equivalent transformation to ['svgo'] +{ + shape : { + transform : [ + {svgo : {}} + ] + /* ... */ + } +}; + +config = // SVGO transformation with custom plugin configuration +{ + shape : { + transform : [ + {svgo : { + plugins : [ + {transformsWithOnePath: true}, + {moveGroupAttrsToElems: false} + ] + }} + ] + /* ... */ + } +}; + +config = // SVGO transformation with custom plugin configuration +{ + shape : { + transform : [ + {custom : + + /** + * Custom callback transformation + * + * @param {SVGShape} shape SVG shape object + * @param {SVGSpriter} spriter SVG spriter + * @param {Function} callback Callback + * @return {void} + */ + function(shape, sprite, callback) { + /* ... */ + callback(null); + } + } + ] + /* ... */ + } +}; + +config = // Custom global post-processing transformation +{ + svg : { + transform : [ + /** + * Custom sprite SVG transformation + * + * @param {String} svg Sprite SVG + * @return {String} Processed SVG + */ + function(svg) { + /* ... */ + return svg; + }, + + /* ... */ + ] + } +}; + +config = { + variables : { + now : +new Date(), + png : function() { + return function(sprite: any, render: any) { + return render(sprite).split('.svg').join('.png'); + } + } + } +}; + +config = // Activate the «css» mode with default configuration +{ + mode : { + css : true + } +}; + +config = // Equivalent: Provide an empty configuration object +{ + mode : { + css : {} + } +}; + +config = // Multiple sprites of the same output mode +{ + mode : { + sprite1 : { + mode : 'css' // Sprite with «css» mode + }, + sprite2 : { + mode : 'css' // Another sprite with «css» mode + } + } +}; + +config = { + mode : { + css : { + example : true + } + } +}; + +config = { + mode : { + css : { + example : {} + } + } +}; + +config = { + mode : { + css : { + render : { + css : { + template : 'path/to/template.html', // relative to current working directory + dest : 'path/to/demo.html' // relative to current output directory + } + } + } + } +}; + +config = { + mode : { + css : { + example : false + } + } +}; diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts index 77a510bee..c319fb174 100644 --- a/svg-sprite/svg-sprite.d.ts +++ b/svg-sprite/svg-sprite.d.ts @@ -7,20 +7,48 @@ /// /// -import {LoggerInstance} from "winston"; declare module "svg-sprite" { import File = require('vinyl'); + import winston = require('winston'); namespace sprite { - import Function = Stream.Function; interface SVGSpriterConstructor extends NodeJS.EventEmitter { + /** + * The spriter's constructor (always the entry point) + * @param config Main configuration for the spriting process + */ new(config: Config): SVGSpriter; } interface SVGSpriter { + /** + * Registering source SVG files + * @param file Absolute path to the SVG file or a vinyl file object carrying all the necessary values (the following arguments are ignored then). + * @param name The "local" part of the file path, possibly including subdirectories which will get traversed to CSS selectors using the shape.id.separator configuration option. + * @param svg SVG file content. + */ add(file: string|File, name: string, svg: string): SVGSpriter; + /** + * Registering source SVG files + * @param file Absolute path to the SVG file or a vinyl file object carrying all the necessary values (the following arguments are ignored then). + */ + add(file: File): SVGSpriter; + /** + * Triggering the sprite compilation + * @param config Configuration object setting the output mode parameters for a single compilation run. If omitted, the mode property of the main configuration used for the constructor will be used. + * @param callback Callback triggered when the compilation has finished. + */ compile(config: Config, callback: CompileCallback): SVGSpriter; + /** + * Triggering the sprite compilation + * @param callback Callback triggered when the compilation has finished. + */ compile(callback: CompileCallback): void; + /** + * Accessing the intermediate SVG resources + * @param dest Base directory for the SVG files in case the will be written to disk. + * @param callback Callback triggered when the shapes are available. + */ getShapes(dest: string, callback: GetShapesCallback): void; } @@ -33,7 +61,7 @@ declare module "svg-sprite" { /** * Logging verbosity or custom logger */ - log?: string|LoggerInstance; + log?: string|winston.LoggerInstance; /** * SVG shape configuration */ @@ -59,74 +87,74 @@ declare module "svg-sprite" { /** * SVG shape ID related options */ - id: { + id?: { /** * Separator for directory name traversal */ - separator: string; + separator?: string; /** * SVG shape ID generator callback */ - generator: string|((string) => string); + generator?: string|((svg: string) => string); /** * File name separator for shape states (e.g. ':hover') */ - pseudo: string; + pseudo?: string; /** * Whitespace replacement for shape IDs */ - whitespace: string; + whitespace?: string; }; /** * Dimension related options */ - dimension: { + dimension?: { /** * Max. shape width */ - maxWidth: number; + maxWidth?: number; /** * Max. shape height */ - maxHeight: number; + maxHeight?: number; /** * Floating point precision */ - precision: number; + precision?: number; /** * Width and height attributes on embedded shapes */ - attributes: boolean; + attributes?: boolean; }; /** * Spacing related options */ - spacing: { + spacing?: { /** * Padding around all shapes */ - padding: number|number[]; + padding?: number|number[]; /** * Padding strategy (similar to CSS `box-sizing`) */ - box: string; + box?: string; }; /** * List of transformations / optimizations */ - transform: (string|CustomConfigurationTransform|CustomCallbackTransform)[]; + transform?: (string|CustomConfigurationTransform|CustomCallbackTransform)[]; /** * Path to YAML file with meta / accessibility data */ - meta: string; + meta?: string; /** * Path to YAML file with extended alignment data */ - align: string; + align?: string; /** * Output directory for optimized intermediate SVG shapes */ - dest: string; + dest?: string; } /** @@ -134,7 +162,7 @@ declare module "svg-sprite" { */ interface CustomConfigurationTransform { [transformationName: string]: { - plugins: { [transformationName: string]: boolean }[]; + plugins?: { [transformationName: string]: boolean }[]; } } @@ -160,14 +188,14 @@ declare module "svg-sprite" { * If you set this to TRUE, *svg-sprite* will look at the registered shapes for an XML declaration and use the first one it can find. * @default true */ - xmlDeclaration: boolean|string; + xmlDeclaration?: boolean|string; /** * Include a declaration in each compiled sprite. If you provide a non-empty string here, * it will be used one-to-one as declaration (e.g. ). * If you set this to TRUE, *svg-sprite* will look at the registered shapes for a DOCTYPE declaration and use the first one it can find. * @default true */ - doctypeDeclaration: boolean|string; + doctypeDeclaration?: boolean|string; /** * In order to avoid ID clashes, the default behavior is to namespace all IDs in the source SVGs before compiling them into a sprite. * Each ID is prepended with a unique string. In some situations, it might be desirable to disable ID namespacing, e.g. when you want to script the resulting sprite. @@ -269,6 +297,10 @@ declare module "svg-sprite" { * @default false */ example?: RenderingConfiguration; + /** + * Specify svg-sprite which output mode to use with this configuration + */ + mode?: string; } interface RenderingConfiguration {