wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-08-20 12:00:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add test code

Browse Source
This commit is contained in:
tkqubo
2015-09-13 08:03:31 +09:00
parent 80e2c14a17
commit 79f74c8402
2 changed files with 364 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svg-sprite/svg-sprite-tests.ts
+309 -1
View File
@@ -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>", // Mode specific output directory
prefix : "svg-%s", // Prefix for CSS selectors
dimensions : "-dims", // Suffix for dimension CSS selectors
sprite : "svg/sprite.<mode>.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> : ... // 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
}
}
};
svg-sprite/svg-sprite.d.ts
Vendored
+55 -23
View File
@@ -7,20 +7,48 @@
/// <reference path="../vinyl/vinyl.d.ts" />
/// <reference path="../winston/winston.d.ts" />
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 <DOCTYPE> declaration in each compiled sprite. If you provide a non-empty string here,
* it will be used one-to-one as declaration (e.g. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">).
* 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 {