Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit.

  • Loading branch information...
commit 9a4670d7f5ca887e3eca9ed3b2514f1a3f145589 0 parents
@domenic domenic authored
9 .gitignore
@@ -0,0 +1,9 @@
+/*.jsproj.user
+/*.suo
+/bin/
+/bld/
+
+/npm-debug.log
+/node_modules/
+
+/out/
16 .jshintrc
@@ -0,0 +1,16 @@
+{
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "latedef": true,
+ "newcap": true,
+ "noarg": true,
+ "nonew": true,
+ "trailing": true,
+ "undef": true,
+ "white": true,
+ "es5": true,
+ "globalstrict": true,
+ "node": true,
+ "indent": 4
+}
14 README.md
@@ -0,0 +1,14 @@
+# WinningJS Todo Sample Application
+
+This is a sample application built for Windows 8 using the [WinningJS] framework. WinningJS integrates the joys of
+Node.js development into the process of building Windows 8 apps. So, via the custom build process exemplified here,
+you get things like modules from [npm], packaged with [browserify], with beautiful [Stylus] for your CSS and [jade] for
+your HTML.
+
+More to come!
+
+[WinningJS]: https://github.com/NobleJS/WinningJS
+[npm]: http://npmjs.org/
+[browserify]: https://github.com/substack/node-browserify
+[Stylus]: http://learnboost.github.com/stylus/
+[jade]: http://jade-lang.com/
75 WinningJS-todo.jsproj
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+ <ItemGroup Label="ProjectConfigurations">
+ <ProjectConfiguration Include="Debug|AnyCPU">
+ <Configuration>Debug</Configuration>
+ <Platform>AnyCPU</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Debug|ARM">
+ <Configuration>Debug</Configuration>
+ <Platform>ARM</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Debug|x64">
+ <Configuration>Debug</Configuration>
+ <Platform>x64</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Debug|x86">
+ <Configuration>Debug</Configuration>
+ <Platform>x86</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Release|AnyCPU">
+ <Configuration>Release</Configuration>
+ <Platform>AnyCPU</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Release|ARM">
+ <Configuration>Release</Configuration>
+ <Platform>ARM</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Release|x64">
+ <Configuration>Release</Configuration>
+ <Platform>x64</Platform>
+ </ProjectConfiguration>
+ <ProjectConfiguration Include="Release|x86">
+ <Configuration>Release</Configuration>
+ <Platform>x86</Platform>
+ </ProjectConfiguration>
+ </ItemGroup>
+ <PropertyGroup Label="Globals">
+ <ProjectGuid>9f73fe12-b921-4b47-b540-8ee32aa2baca</ProjectGuid>
+ </PropertyGroup>
+ <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+ <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+ <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+ <PropertyGroup>
+ <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+ <TargetPlatformVersion>8.0</TargetPlatformVersion>
+ <DefaultLanguage>en-US</DefaultLanguage>
+ <PackageCertificateKeyFile>WinningJS-todo_TemporaryKey.pfx</PackageCertificateKeyFile>
+ <PackageCertificateThumbprint>929923E3D0298086DC261ACC99F65C1ED20178EA</PackageCertificateThumbprint>
+ </PropertyGroup>
+ <ItemGroup>
+ <AppxManifest Include="package.appxmanifest">
+ <SubType>Designer</SubType>
+ </AppxManifest>
+ <None Include="grunt.js" />
+ <None Include="index.jade" />
+ <None Include="pages\hello.jade" />
+ <None Include="styles\**\*.*" />
+ <None Include="lib\**\*.*" />
+ <None Include="package.json" />
+ <None Include="WinningJS-todo_TemporaryKey.pfx" />
+ <Content Include="out\**\*.*" />
+ <Content Include="images\**\*.*" />
+ </ItemGroup>
+ <ItemGroup>
+ <SDKReference Include="Microsoft.WinJS, Version=0.6" />
+ </ItemGroup>
+ <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+ <Target Name="BeforeBuild">
+ <!-- TODO get this to output nicely to the error list on failure, maybe without npm spew -->
+ <!-- TODO automate npm install? -->
+ <Exec Command="npm run-script before-build" />
+ </Target>
+ <Target Name="AfterBuild">
+ </Target>
+</Project>
46 WinningJS-todo.sln
@@ -0,0 +1,46 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio 11
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "WinningJS-todo", "WinningJS-todo.jsproj", "{9F73FE12-B921-4B47-B540-8EE32AA2BACA}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|ARM = Debug|ARM
+ Debug|Any CPU = Debug|Any CPU
+ Debug|x64 = Debug|x64
+ Debug|x86 = Debug|x86
+ Release|ARM = Release|ARM
+ Release|Any CPU = Release|Any CPU
+ Release|x64 = Release|x64
+ Release|x86 = Release|x86
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|ARM.ActiveCfg = Debug|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|ARM.Build.0 = Debug|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|ARM.Deploy.0 = Debug|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|Any CPU.Build.0 = Debug|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x64.ActiveCfg = Debug|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x64.Build.0 = Debug|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x64.Deploy.0 = Debug|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x86.ActiveCfg = Debug|x86
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x86.Build.0 = Debug|x86
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Debug|x86.Deploy.0 = Debug|x86
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|ARM.ActiveCfg = Release|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|ARM.Build.0 = Release|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|ARM.Deploy.0 = Release|ARM
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|Any CPU.ActiveCfg = Release|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|Any CPU.Build.0 = Release|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|Any CPU.Deploy.0 = Release|Any CPU
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x64.ActiveCfg = Release|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x64.Build.0 = Release|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x64.Deploy.0 = Release|x64
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x86.ActiveCfg = Release|x86
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x86.Build.0 = Release|x86
+ {9F73FE12-B921-4B47-B540-8EE32AA2BACA}.Release|x86.Deploy.0 = Release|x86
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+EndGlobal
BIN  WinningJS-todo_TemporaryKey.pfx
Binary file not shown
120 grunt.js
@@ -0,0 +1,120 @@
+"use strict";
+
+var path = require("path");
+var jade = require("jade");
+var stylus = require("stylus");
+var browserify = require("browserify");
+
+module.exports = function (grunt) {
+ // TODO: factor out this grunt task into a separate project?
+ // Modularize? Basically all this code should not be in our grunt.js.
+
+ // TODO: jQuery is making our build process take way too long (probably because it's scanning the jQuery source
+ // code for `require`s). Unacceptable; this is JavaScript not C++.
+
+ function urlize(path) {
+ return "/" + path.replace(/\\/g, "/");
+ }
+
+ function browserifyJade(body, file) {
+ var templateFunction = jade.compile(body, { filename: file, compileDebug: false, client: true });
+ return "module.exports = " + templateFunction.toString() + ";";
+ }
+
+ function doBrowserify(entryFile, dest, aliases) {
+ var prelude = browserify().require(aliases).require(path.resolve("node_modules/jade/runtime.js")).bundle();
+ var preludeDest = path.join(dest, "browserify.js");
+ grunt.file.write(preludeDest, prelude);
+ grunt.log.writeln("File \"" + preludeDest + "\" created.");
+
+ var bundle = browserify();
+ Object.keys(aliases).forEach(function (alias) {
+ bundle.alias(alias, aliases[alias]);
+ });
+ bundle.register(".jade", browserifyJade);
+ bundle.require(path.resolve(entryFile), { basedir: __dirname, root: __dirname, target: entryFile });
+
+ var newFileUrls = [urlize(preludeDest)];
+ Object.keys(bundle.files).forEach(function (fileName) {
+ var newFilePath = path.join(dest, path.relative(__dirname, fileName));
+ var newFileContents = bundle.files[fileName].body;
+
+ grunt.file.write(newFilePath, newFileContents);
+ grunt.log.writeln("File \"" + newFilePath + "\" created.");
+
+ newFileUrls.push(urlize(newFilePath));
+ });
+
+ return newFileUrls;
+ }
+
+ function buildStylus(source, dest) {
+ var files = grunt.file.expandFiles(source);
+ var newFileUrls = [];
+ files.forEach(function (fileName) {
+ var str = grunt.file.read(fileName);
+ var newFileName = fileName.match(/(.*).styl/)[1] + ".css";
+ var newFilePath = path.join(dest, newFileName);
+ stylus.render(str, { filename: newFileName }, function (err, css) {
+ if (err) {
+ grunt.warn(err.message);
+ } else {
+ grunt.file.write(newFilePath, css);
+ grunt.log.writeln("File \"" + newFilePath + "\" created.");
+
+ newFileUrls.push(urlize(newFilePath));
+ }
+ });
+ });
+
+ return newFileUrls;
+ }
+
+ function writeIndex(src, dest, jadeLocals) {
+ var jadeFile = grunt.file.read(src);
+ var templateFunction = jade.compile(jadeFile, { filename: src, compileDebug: false, pretty: true });
+ var indexHtml = templateFunction(jadeLocals);
+ grunt.file.write(dest, indexHtml);
+ grunt.log.writeln("File \"" + dest + "\" created");
+ }
+
+ grunt.registerTask("buildIndex", "Browserify modules, compile Stylus, and build an index.html.", function () {
+ var browserifyConfig = grunt.config("buildIndex.browserify");
+ var scripts = doBrowserify(browserifyConfig.entry, browserifyConfig.dest, browserifyConfig.aliases || {});
+
+ var stylusConfig = grunt.config("buildIndex.stylus");
+ var styles = buildStylus(stylusConfig.src, stylusConfig.dest);
+
+ var indexConfig = grunt.config("buildIndex");
+ indexConfig.src = indexConfig.src ? path.normalize(indexConfig.src) : "index.jade";
+ indexConfig.dest = indexConfig.dest ? path.normalize(indexConfig.dest) : "index.html";
+
+ writeIndex(indexConfig.src, indexConfig.dest, {
+ scripts: scripts,
+ styles: styles,
+ entryModule: browserifyConfig.entry
+ });
+ });
+
+ grunt.initConfig({
+ lint: {
+ all: ["lib/**/*.js"]
+ },
+ buildIndex: {
+ dest: "out/index.html",
+ browserify: {
+ entry: "lib/start.js",
+ dest: "out/browserified",
+ aliases: {
+ "jquery": "jquery-browserify"
+ }
+ },
+ stylus: {
+ src: ["**/*.styl"],
+ dest: "out/css"
+ }
+ }
+ });
+
+ grunt.registerTask("default", "buildIndex");
+};
BIN  images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/small-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/splash-screen.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  images/store-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 index.jade
@@ -0,0 +1,26 @@
+doctype 5
+html
+ head
+ meta(charset="utf-8")
+ title NOOK Study
+
+ //- WinJS references
+ link(href="//Microsoft.WinJS.0.6/css/ui-dark.css", rel="stylesheet")
+ script(src="//Microsoft.WinJS.0.6/js/base.js")
+ script(src="//Microsoft.WinJS.0.6/js/ui.js")
+
+ //- Automatically inserted scripts
+ each script in scripts
+ script(src=script)
+
+ //- Require the entry module (determined at compile time), plus the Jade runtime for templates to use.
+ script
+ require("#{entryModule}");
+ require("jade/runtime");
+
+ //- Automatically inserted styles
+ each style in styles
+ link(href="#{style}", rel="stylesheet")
+
+ body
+ p Hello, world, from index.jade! //- TODO for some reason this isn't showing up?
35 lib/start.js
@@ -0,0 +1,35 @@
+"use strict";
+
+// TODO: right now this starts the app (i.e. executes code).
+// Probably not a good pattern; probably should need to manually call app.init() or something.
+// Look at how other frameworks do it.
+var app = require("WinningJS/lib/app");
+
+// Note we include this here, not in .jshintrc, because you *should* be explicit about when you touch the DOM.
+// Most files should not.
+/*jshint browser: true*/
+
+
+var $ = require("jquery");
+var hello = require("../pages/hello.jade");
+
+app.on("launch", function (event) {
+ var $hello = $("p").text("Hello, world, from jQuery!");
+ $(document.body).append($hello);
+
+ $(document.body).append(hello());
+});
+
+app.on("reactivate", function (event) {
+ // TODO: This application has been reactivated from suspension.
+ // Restore application state here.
+});
+
+app.on("beforeSuspend", function (event) {
+ // TODO: This application is about to be suspended. Save any state
+ // that needs to persist across suspensions here. You might use the
+ // WinJS.Application.sessionState object, which is automatically
+ // saved and restored across suspension. If you need to complete an
+ // asynchronous operation before your application is suspended, call
+ // event.setPromise().
+});
30 package.appxmanifest
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest">
+ <Identity Name="9f73fe12-b921-4b47-b540-8ee32aa2baca" Version="1.0.0.0" Publisher="CN=NobleJS" />
+ <Properties>
+ <!-- TODO sync these up with package.json? -->
+ <DisplayName>WinningJS Todo</DisplayName>
+ <Description>Demo todo list application for Windows 8, built on the WinningJS framework</Description>
+ <PublisherDisplayName>NobleJS</PublisherDisplayName>
+ <Logo>images\store-logo.png</Logo>
+ </Properties>
+ <Prerequisites>
+ <OSMinVersion>6.2</OSMinVersion>
+ <OSMaxVersionTested>6.2</OSMaxVersionTested>
+ </Prerequisites>
+ <Resources>
+ <Resource Language="x-generate" />
+ </Resources>
+ <Applications>
+ <Application Id="App" StartPage="out\index.html">
+ <!-- TODO seriously there's a lot of duplication going on here. Hide this XML shit. -->
+ <VisualElements DisplayName="WinningJS Todo" Logo="images\logo.png" SmallLogo="images\small-logo.png" Description="Demo todo list application for Windows 8, built on the WinningJS framework." ForegroundText="light" BackgroundColor="#000000">
+ <DefaultTile ShowName="allLogos" />
+ <SplashScreen Image="images\splash-screen.png" />
+ </VisualElements>
+ </Application>
+ </Applications>
+ <Capabilities>
+ <Capability Name="internetClient" />
+ </Capabilities>
+</Package>
36 package.json
@@ -0,0 +1,36 @@
+{
+ "name": "WinningJS-todo",
+ "description": "Demo todo list application for Windows 8, built on the WinningJS framework",
+ "version": "1.0.0",
+ "author": "NobleJS",
+ "private": true,
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/NobleJS/WinningJS-todo"
+ },
+ "bugs": {
+ "url": "http://github.com/NobleJS/WinningJS-todo/issues"
+ },
+ "scripts": {
+ "before-build": "grunt.cmd",
+ "lint": "jshint lib --show-non-errors"
+ },
+ "dependencies": {
+ "WinningJS": "git://github.com/NobleJS/WinningJS.git",
+ "jade": ">= 0.26.1",
+ "jquery-browserify": ">= 1.7.2"
+ },
+ "devDependencies": {
+ "grunt": "*",
+ "browserify": "git://github.com/domenic/node-browserify.git",
+ "stylus": "*",
+ "jshint": "*"
+ },
+ "_dependencyComments": {
+ "WinningJS": "Not published on npm yet, since it is not near release-quality.",
+ "browserify": "Needs to work on Windows, and with relative paths."
+ },
+ "engines": {
+ "node": "*"
+ }
+}
1  pages/hello.jade
@@ -0,0 +1 @@
+p Hello, world, from a dynamically-included Jade template!
17 styles/layout.styl
@@ -0,0 +1,17 @@
+body
+ margin: 300px
+
+ @media screen and (-ms-view-state: fullscreen-landscape)
+ background: blue
+
+ @media screen and (-ms-view-state: filled)
+ background: purple
+
+ @media screen and (-ms-view-state: snapped)
+ background: orange
+
+ @media screen and (-ms-view-state: fullscreen-portrait)
+ background: green
+
+p
+ margin: 200px 0
Please sign in to comment.
Something went wrong with that request. Please try again.