Skip to content
This repository has been archived by the owner on Oct 12, 2022. It is now read-only.

Cordova React TypeScript (from react ts sample @build2016) #100

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions cordova-react/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
typings
node_modules


plugins/
platforms/
.vs/
.vscode/
bin/
bld/
app/*.js
app/*.map
www/scripts/
*.user
28 changes: 28 additions & 0 deletions cordova-react/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Cordova React Sample

This sample shows how to use [React](http://facebook.github.io/react) with [Apache Cordova](http://cordova.io).

## Installation Steps

The sample has been tested with Visual Studio 2015, and Visual Studio Code 1.0. Below you can find installation instructions for each tool.

### Visual Studio 2015
- Install [Visual Studio 2015](http://visualstudio.com)
- Install the [Visual Studio Tools for Apache Cordova](http://taco.visualstudio.com/en-us/docs/install-vs-tools-apache-cordova/)
- Open the project _cordova-react.jsproj_
- Restore packages (right click in the dependencies node)
- Run it !! (using F5 or Ctrl+F5)

### Visual Studio Code
*(you will need node and npm installed before)*
- Install [VSCode](https://code.visualstudio.com/)
- (Optional: Install the VSCode [Cordova Extension](https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools) )
- From the command line run `npm install`
- From the command line run `npm run bundle`
- Add the cordova platform and run `cordova platform add browser && cordova run`






25 changes: 25 additions & 0 deletions cordova-react/app/RedditSubmission.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from "react";
import { Submission } from "./reddit"

export interface SubmissionProps extends Submission {
elementPosition: number;
}

let imageStyle = {
maxWidth: "600px",
maxHeight: "600px",
};

export const SubmissionComp = (submission: SubmissionProps) =>
<div style={{ fontFamily: "sans-serif" }}>
{ submission.elementPosition ? <br /> : "" }
<span style={{ fontSize: "1.2rem" }}>
<span>{ submission.elementPosition + 1 }.</span>
<a href={ submission.url }>{submission.title}</a>
</span>
<span> ({ submission.domain }) </span>
<div>
Submitted at { new Date(submission.created_utc).toLocaleTimeString() }.
</div>
<img src={submission.url} style={imageStyle}/>
</div>;
23 changes: 23 additions & 0 deletions cordova-react/app/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import * as $ from "jquery";
import * as React from "react";
import * as ReactDOM from "react-dom";

import { ApiResponse } from "./reddit";
import { SubmissionComp } from "./RedditSubmission"

function displaySubreddit(subreddit: string) {
let settings = {
url: `https://www.reddit.com/r/${subreddit}.json`
};
$.ajax(settings).done(response => {
let submissions = (response as ApiResponse).data.children;
// TODO: filter on images
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're already filtering on the images.

submissions = submissions.filter(({ data }) => /(png|jpg)$/.test(data.url));
let components = submissions.map((value, index) =>
<SubmissionComp key={ index } elementPosition={ index } { ...value.data } />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No spaces in JSX attribute expressions

);
ReactDOM.render(<div>{ components }</div>, document.getElementById("content"));
});
}

displaySubreddit("aww");
16 changes: 16 additions & 0 deletions cordova-react/app/reddit.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export interface ApiResponse {
data: {
children: {
data: Submission
}[];
};
}

export interface Submission {
author: string;
domain: string;
title: string;
subreddit: string;
url: string;
created_utc: string;
}
26 changes: 26 additions & 0 deletions cordova-react/config.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<widget id="vs.mdd.taco.react" version="0.0.1" windows-packageVersion="1.1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>React Cordova Demo</name>
<description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
<author email="[email protected]" href="http://cordova.io">Apache Cordova Team</author>
<content src="index.html" />
<access origin="*" />
<preference name="SplashScreen" value="screen" />
<preference name="windows-target-version" value="10.0" />
<preference name="windows-phone-target-version" value="8.1" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="http://m.imgur.com" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
116 changes: 116 additions & 0 deletions cordova-react/cordova-react.jsproj
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<ItemGroup Label="ProjectConfigurations">
<ProjectConfiguration Include="Debug|Android">
<Configuration>Debug</Configuration>
<Platform>Android</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|iOS">
<Configuration>Debug</Configuration>
<Platform>iOS</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows-AnyCPU">
<Configuration>Debug</Configuration>
<Platform>Windows-AnyCPU</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows-x64">
<Configuration>Debug</Configuration>
<Platform>Windows-x64</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows-x86">
<Configuration>Debug</Configuration>
<Platform>Windows-x86</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows-ARM">
<Configuration>Debug</Configuration>
<Platform>Windows-ARM</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows Phone 8">
<Configuration>Debug</Configuration>
<Platform>Windows Phone 8</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Debug|Windows Phone (Universal)">
<Configuration>Debug</Configuration>
<Platform>Windows Phone (Universal)</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Android">
<Configuration>Release</Configuration>
<Platform>Android</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|iOS">
<Configuration>Release</Configuration>
<Platform>iOS</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows-AnyCPU">
<Configuration>Release</Configuration>
<Platform>Windows-AnyCPU</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows-x64">
<Configuration>Release</Configuration>
<Platform>Windows-x64</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows-x86">
<Configuration>Release</Configuration>
<Platform>Windows-x86</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows-ARM">
<Configuration>Release</Configuration>
<Platform>Windows-ARM</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows Phone 8">
<Configuration>Release</Configuration>
<Platform>Windows Phone 8</Platform>
</ProjectConfiguration>
<ProjectConfiguration Include="Release|Windows Phone (Universal)">
<Configuration>Release</Configuration>
<Platform>Windows Phone (Universal)</Platform>
</ProjectConfiguration>
</ItemGroup>
<ItemGroup>
<Service Include="{4a0dddb5-7a95-4fbf-97cc-616d07737a77}" />
</ItemGroup>
<PropertyGroup Label="Globals">
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<ProjectGuid>f191e5cb-ce9f-474d-98b3-ea1c47943727</ProjectGuid>
</PropertyGroup>
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
<PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0'">
<VisualStudioVersion>14.0</VisualStudioVersion>
</PropertyGroup>
<PropertyGroup>
<TypeScriptCompileOnSaveEnabled>false</TypeScriptCompileOnSaveEnabled>
</PropertyGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\ApacheCordovaTools\vs-mda-targets\Microsoft.TypeScript.MDA.targets" />
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\ApacheCordovaTools\vs-mda-targets\Microsoft.MDA.FileMirroring.targets" />
<PropertyGroup>
<ProjectUISubcaption>Tools for Apache Cordova</ProjectUISubcaption>
</PropertyGroup>
<PropertyGroup>
<TargetPlatformIdentifier>MDD</TargetPlatformIdentifier>
<AppxAutoIncrementPackageRevision>True</AppxAutoIncrementPackageRevision>
<AppxBundle>Always</AppxBundle>
<AppxBundlePlatforms>x86|x64|arm</AppxBundlePlatforms>
</PropertyGroup>
<Target Name="EnsureBuildPrerequisites">
<!-- These errors will trigger if building from inside Visual Studio and requirements could not be determined -->
<Error Condition="$(MDAPropertiesEvaluated) == 'true' And $(NodeJsDir) == ''" Text="Path to NodeJs could not be determined. Please check that NodeJs has been installed." />
<Error Condition="$(MDAPropertiesEvaluated) == 'true' And $(MDAVsixDir) == ''" Text="Path to the Visual Studio Extension for Tools for Apache Cordova could not be determined. Please check that the extension has been installed." />
<!-- These errors will trigger if building from outside Visual Studio (e.g. command line) and environment variables have not been set -->
<Error Condition="$(MDAPropertiesEvaluated) == '' And $(NodeJsDir) == ''" Text="Path to NodeJs has not been specified. Please check that NodeJs has been installed and set the NodeJsDir environment variable before building." />
<Error Condition="$(MDAPropertiesEvaluated) == '' And $(MDAVsixDir) == ''" Text="Path to Visual Studio Extension for Tools for Apache Cordova has not been specified. Please install it and set the MDAVsixDir environment variable before building." />
<!-- Sanity check that things exist in the specified places. These are more likely to fail if building outside Visual Studio and the required environment variables have not been set, or set incorrectly. -->
<Error Condition="!Exists('$(NodeJsDir)') Or !Exists('$(NodeJsDir)\node.exe')" Text="The specified NodeJs directory $(NodeJsDir) either does not exist, or does not contain node.exe. Please check that NodeJs has been installed, and set the NodeJsDir variable to the correct directory." />
<Error Condition="!Exists('$(MDAVsixDir)') Or !Exists('$(MDAVsixDir)\packages\vs-tac')" Text="The specified directory to the Visual Studio extension $(MDAVsixDir)\node.exe either does not exist, or does not contain a packages\vs-tac sub-directory. Please check that the extension directory exists and set the MDAVsixDir variable to the correct directory." />
<!-- Installs (if necessary) the supporting Nodejs module -->
<Exec Command="&quot;$(MDAVsixDir)&quot;\packages\vs-tac\install &quot;$(NodeJsDir)&quot; &quot;$(MDAVsixDir)&quot;\packages\vs-tac" />
</Target>
<ProjectExtensions>
<VisualStudio>
<UserProperties />
</VisualStudio>
</ProjectExtensions>
<Import Project="_apacheCordovaProjectSourceItems.Targets" Condition="Exists('_apacheCordovaProjectSourceItems.Targets')" />
<Target Name="BeforeBuild">
<Exec Command="npm run bundle" />
</Target>
</Project>
80 changes: 80 additions & 0 deletions cordova-react/cordova-react.sln
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio 14
VisualStudioVersion = 14.0.25123.0
MinimumVisualStudioVersion = 10.0.40219.1
Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "cordova-react", "cordova-react.jsproj", "{F191E5CB-CE9F-474D-98B3-EA1C47943727}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Android = Debug|Android
Debug|iOS = Debug|iOS
Debug|Windows Phone (Universal) = Debug|Windows Phone (Universal)
Debug|Windows Phone 8 = Debug|Windows Phone 8
Debug|Windows-AnyCPU = Debug|Windows-AnyCPU
Debug|Windows-ARM = Debug|Windows-ARM
Debug|Windows-x64 = Debug|Windows-x64
Debug|Windows-x86 = Debug|Windows-x86
Release|Android = Release|Android
Release|iOS = Release|iOS
Release|Windows Phone (Universal) = Release|Windows Phone (Universal)
Release|Windows Phone 8 = Release|Windows Phone 8
Release|Windows-AnyCPU = Release|Windows-AnyCPU
Release|Windows-ARM = Release|Windows-ARM
Release|Windows-x64 = Release|Windows-x64
Release|Windows-x86 = Release|Windows-x86
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Android.ActiveCfg = Debug|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Android.Build.0 = Debug|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Android.Deploy.0 = Debug|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|iOS.ActiveCfg = Debug|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|iOS.Build.0 = Debug|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|iOS.Deploy.0 = Debug|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone (Universal).ActiveCfg = Debug|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone (Universal).Build.0 = Debug|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone (Universal).Deploy.0 = Debug|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone 8.ActiveCfg = Debug|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone 8.Build.0 = Debug|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows Phone 8.Deploy.0 = Debug|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-AnyCPU.ActiveCfg = Debug|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-AnyCPU.Build.0 = Debug|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-AnyCPU.Deploy.0 = Debug|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-ARM.ActiveCfg = Debug|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-ARM.Build.0 = Debug|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-ARM.Deploy.0 = Debug|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x64.ActiveCfg = Debug|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x64.Build.0 = Debug|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x64.Deploy.0 = Debug|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x86.ActiveCfg = Debug|Windows-x86
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x86.Build.0 = Debug|Windows-x86
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Debug|Windows-x86.Deploy.0 = Debug|Windows-x86
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Android.ActiveCfg = Release|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Android.Build.0 = Release|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Android.Deploy.0 = Release|Android
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|iOS.ActiveCfg = Release|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|iOS.Build.0 = Release|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|iOS.Deploy.0 = Release|iOS
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone (Universal).ActiveCfg = Release|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone (Universal).Build.0 = Release|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone (Universal).Deploy.0 = Release|Windows Phone (Universal)
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone 8.ActiveCfg = Release|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone 8.Build.0 = Release|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows Phone 8.Deploy.0 = Release|Windows Phone 8
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-AnyCPU.ActiveCfg = Release|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-AnyCPU.Build.0 = Release|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-AnyCPU.Deploy.0 = Release|Windows-AnyCPU
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-ARM.ActiveCfg = Release|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-ARM.Build.0 = Release|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-ARM.Deploy.0 = Release|Windows-ARM
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x64.ActiveCfg = Release|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x64.Build.0 = Release|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x64.Deploy.0 = Release|Windows-x64
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x86.ActiveCfg = Release|Windows-x86
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x86.Build.0 = Release|Windows-x86
{F191E5CB-CE9F-474D-98B3-EA1C47943727}.Release|Windows-x86.Deploy.0 = Release|Windows-x86
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
EndGlobal
23 changes: 23 additions & 0 deletions cordova-react/hooks/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!--
#
# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional information
# regarding copyright ownership. The ASF licenses this file
# to you under the Apache License, Version 2.0 (the
# "License"); you may not use this file except in compliance
# with the License. You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing,
# software distributed under the License is distributed on an
# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
# KIND, either express or implied. See the License for the
# specific language governing permissions and limitations
# under the License.
#
-->
# Cordova Hooks

Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. See Hooks Guide for more details: http://cordova.apache.org/docs/en/edge/guide_appdev_hooks_index.md.html#Hooks%20Guide.
30 changes: 30 additions & 0 deletions cordova-react/merges/android/scripts/android2.3-jscompat.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Polyfill for Function.prototype.bind() support on Android 2.3
(function () {
if (!Function.prototype.bind) {
Function.prototype.bind = function (thisValue) {
if (typeof this !== "function") {
throw new TypeError(this + " cannot be bound as it is not a function");
}

// bind() also permits prepending arguments to the call
var preArgs = Array.prototype.slice.call(arguments, 1);

// The actual function to bind the "this" value and arguments to
var functionToBind = this;
var noOpFunction = function () { };

// The "this" argument to use
var thisArg = this instanceof noOpFunction && thisValue ? this : thisValue;

// The resulting bound function
var boundFunction = function () {
return functionToBind.apply(thisArg, preArgs.concat(Array.prototype.slice.call(arguments)));
};

noOpFunction.prototype = this.prototype;
boundFunction.prototype = new noOpFunction();

return boundFunction;
};
}
}());
Loading