├── .gitattributes
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── RELEASING.md
├── SECURITY.md
├── SPECIFICATION.md
├── codecov.yml
├── examples
├── reactnative
│ ├── .babelrc
│ ├── .buckconfig
│ ├── .gitattributes
│ ├── .gitignore
│ ├── .watchmanconfig
│ ├── App.js
│ ├── README.md
│ ├── __tests__
│ │ └── App.js
│ ├── android
│ │ ├── app
│ │ │ ├── BUCK
│ │ │ ├── build.gradle
│ │ │ ├── proguard-rules.pro
│ │ │ └── src
│ │ │ │ └── main
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ ├── java
│ │ │ │ └── com
│ │ │ │ │ └── reactnative
│ │ │ │ │ ├── MainActivity.java
│ │ │ │ │ └── MainApplication.java
│ │ │ │ └── res
│ │ │ │ ├── mipmap-hdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-mdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ ├── mipmap-xxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ │ └── values
│ │ │ │ ├── strings.xml
│ │ │ │ └── styles.xml
│ │ ├── build.gradle
│ │ ├── gradle.properties
│ │ ├── gradle
│ │ │ └── wrapper
│ │ │ │ ├── gradle-wrapper.jar
│ │ │ │ └── gradle-wrapper.properties
│ │ ├── gradlew
│ │ ├── gradlew.bat
│ │ ├── keystores
│ │ │ ├── BUCK
│ │ │ └── debug.keystore.properties
│ │ └── settings.gradle
│ ├── app.json
│ ├── index.js
│ ├── ios
│ │ ├── reactnative-tvOS
│ │ │ └── Info.plist
│ │ ├── reactnative-tvOSTests
│ │ │ └── Info.plist
│ │ ├── reactnative.xcodeproj
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata
│ │ │ │ └── xcschemes
│ │ │ │ ├── reactnative-tvOS.xcscheme
│ │ │ │ └── reactnative.xcscheme
│ │ ├── reactnative
│ │ │ ├── AppDelegate.h
│ │ │ ├── AppDelegate.m
│ │ │ ├── Base.lproj
│ │ │ │ └── LaunchScreen.xib
│ │ │ ├── Images.xcassets
│ │ │ │ ├── AppIcon.appiconset
│ │ │ │ │ └── Contents.json
│ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ └── main.m
│ │ └── reactnativeTests
│ │ │ ├── Info.plist
│ │ │ └── reactnativeTests.m
│ └── package.json
├── web
│ ├── README.md
│ ├── babel.js
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ ├── server.js
│ └── webpack.config.js
├── webpack.config.js
└── whrs.toml
├── greenkeeper.json
├── package.json
└── packages
├── bundle
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package.json
├── test
│ ├── index.test.js
│ ├── snapshots.test.js
│ └── walker.test.js
└── walker
│ └── index.js
├── dimensions
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package.json
├── render.js
└── test.js
├── list
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package.json
└── test
│ └── index.test.js
├── parser
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── asset.js
├── index.js
├── package.json
├── packer.js
├── test
│ ├── asset.test.js
│ ├── index.test.js
│ ├── packer.test.js
│ └── transform.test.js
└── transform.js
├── provider
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── asset
│ └── index.js
├── context
│ └── index.js
├── fallback
│ └── index.js
├── index.js
├── package.json
├── provider
│ ├── index.js
│ └── remote.js
├── test
│ ├── asset.test.js
│ ├── fixtures
│ │ └── index.js
│ ├── index.test.js
│ ├── nock.js
│ ├── provider.test.js
│ └── remote.test.js
└── wrapper
│ └── index.js
├── test
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── deeper
│ └── homer.svg
├── entry.js
├── godaddy.json
├── godaddy.svg
├── homer-classnames.svg
├── homer-no-viewbox.json
├── homer-no-viewbox.svg
├── homer.json
├── homer.svg
├── package.json
├── src
│ └── index.js
├── tiger.json
└── tiger.svg
└── webpack
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── loader.js
├── package.json
└── test
└── index.test.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | package-lock.json binary
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # OSX
6 | .DS_Store
7 |
8 | # Xcode
9 | build/
10 | *.pbxuser
11 | !default.pbxuser
12 | *.mode1v3
13 | !default.mode1v3
14 | *.mode2v3
15 | !default.mode2v3
16 | *.perspectivev3
17 | !default.perspectivev3
18 | xcuserdata
19 | *.xccheckout
20 | *.moved-aside
21 | DerivedData
22 | *.hmap
23 | *.ipa
24 | *.xcuserstate
25 | project.xcworkspace
26 |
27 | # Android/IntelliJ
28 | build/
29 | .idea
30 | .gradle
31 | local.properties
32 | *.iml
33 |
34 | # BUCK
35 | buck-out/
36 | \.buckd/
37 | *.keystore
38 |
39 | # fastlane
40 | #
41 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
42 | # screenshots whenever they are needed.
43 | # For more information about the recommended setup visit:
44 | # https://docs.fastlane.tools/best-practices/source-control/
45 |
46 | */fastlane/report.xml
47 | */fastlane/Preview.html
48 | */fastlane/screenshots
49 |
50 | # Runtime data
51 | pids
52 | *.pid
53 | *.seed
54 |
55 | # Directory for instrumented libs generated by jscoverage/JSCover
56 | lib-cov
57 |
58 | # Coverage directory used by tools like istanbul/nyc
59 | coverage
60 | .nyc_output
61 |
62 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
63 | .grunt
64 |
65 | # node-waf configuration
66 | .lock-wscript
67 |
68 | # Compiled binary addons (http://nodejs.org/api/addons.html)
69 | build/Release
70 |
71 | # Dependency directory and Node.js specific files
72 | node_modules
73 | npm-debug.log
74 | yarn-error.log
75 |
76 | # IDE
77 | .idea
78 | *.iml
79 |
80 | # Ignore build directories
81 | dist
82 |
83 | # Compiled source
84 | lib
85 | package-lock.json
86 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "8"
4 | - "10"
5 | - "12"
6 | sudo: required
7 | before_script:
8 | - sudo chown root /opt/google/chrome/chrome-sandbox
9 | - sudo chmod 4755 /opt/google/chrome/chrome-sandbox
10 | - export DISPLAY=:99.0
11 | - sh -e /etc/init.d/xvfb start
12 | addons:
13 | chrome: stable
14 | after_success:
15 | - bash <(curl -s https://codecov.io/bash)
16 | matrix:
17 | fast_finish: true
18 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 GoDaddy Operating Company, LLC.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/RELEASING.md:
--------------------------------------------------------------------------------
1 | # Releasing
2 |
3 | Some of the packages are tightly coupled and need to be released in a specific
4 | order. This file documents the order and release process of all the packages
5 | that are included in the Asset-System project.
6 |
7 | Releases are done using the `mono-repos` module:
8 |
9 | ```
10 | npm install -g mono-repos
11 | ```
12 |
13 | ## test
14 |
15 | This is the bundle that includes all test fixtures that are shared between
16 | the various of packages. This is probably the first package that you want to
17 | bump to latest and ensure that every sub-package receives the latest and
18 | greatest version:
19 |
20 | ```
21 | mono --publish test --version x.x.x
22 | ```
23 |
24 | Once released, bump version in _every_ package.
25 |
26 | ## parser
27 |
28 | If there are `asset-parser` changes, update the version in the `CHANGELOG.md`
29 | and release a new version:
30 |
31 | ```
32 | mono --publish parser --version x.x.x
33 | ```
34 |
35 | - Bump released version in `asset-provider`
36 | - Bump released version in `asset-bundle`
37 |
38 | ## provider
39 |
40 | If there are `asset-provider` changes, update the version in the `CHANGELOG.md`
41 | and release a new version:
42 |
43 | ```
44 | mono --publish provider --version x.x.x
45 | ```
46 |
47 | ## dimensions
48 |
49 | If there are `asset-dimensions` changes, update the version in the `CHANGELOG.md`
50 | and release a new version:
51 |
52 | ```
53 | mono --publish dimensions --version x.x.x
54 | ```
55 |
56 | - Bump released version in `asset-bundle`
57 |
58 | ## bundle
59 |
60 | If there are `asset-bundle` changes, update the version in the `CHANGELOG.md`
61 | and release a new version:
62 |
63 | ```
64 | mono --publish bundle --version x.x.x
65 | ```
66 |
67 | - Bump released version in `asset-webpack`
68 |
69 | ## webpack
70 |
71 | If there are `asset-webpack` changes, update the version in the `CHANGELOG.md`
72 | and release a new version:
73 |
74 | ```
75 | mono --publish webpack --version x.x.x
76 | ```
77 |
78 | ## list
79 |
80 | If there are `asset-list` changes, update the version in the `CHANGELOG.md`
81 | and release a new version:
82 |
83 | ```
84 | mono --publish webpack --list x.x.x
85 | ```
86 |
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Reporting Security Issues
2 |
3 | We take security very seriously at GoDaddy. We appreciate your efforts to
4 | responsibly disclose your findings, and will make every effort to acknowledge
5 | your contributions.
6 |
7 | ## Where should I report security issues?
8 |
9 | In order to give the community time to respond and upgrade, we strongly urge you
10 | report all security issues privately.
11 |
12 | To report a security issue in one of our Open Source projects email us directly
13 | at **oss@godaddy.com** and include the word "SECURITY" in the subject line.
14 |
15 | This mail is delivered to our Open Source Security team.
16 |
17 | After the initial reply to your report, the team will keep you informed of the
18 | progress being made towards a fix and announcement, and may ask for additional
19 | information or guidance.
20 |
--------------------------------------------------------------------------------
/SPECIFICATION.md:
--------------------------------------------------------------------------------
1 | # Specification
2 |
3 | **Current spec version: 0.1.0**
4 |
5 | This documentation contains instructions how to transform SVG asset(s) in to
6 | readable format for this module. There are various of transformation steps
7 | that need to happen before an SVG can be consumed by this library. These exist
8 | for the following reason:
9 |
10 | - Reduce the data format so less bytes have to be send over the wire.
11 | - The client side code should be as small and dumb as possible.
12 | - Pre-transform SVG in easy format so less CPU cycles have to spend in the browser.
13 |
14 | ## Table of Contents
15 |
16 | - [Specification](#specification)
17 | - [Structure](#structure)
18 | - [Bundle](#bundle)
19 | - [Serialization](#serialization)
20 |
21 | ### Structure
22 |
23 | A SVG file needs to be transformed in a correct bundle file, in order for that
24 | you need to transform the SVG elements in to JavaScript compatible syntax. This
25 | should be done before uploading the asset so the computation for this happens
26 | during the build process on your own machine, instead of on the client devices
27 | that load these assets. If we imagine having a SVG with the following contents:
28 |
29 | ```html
30 |
38 | ```
39 |
40 | We want to end up with the following "optimized" structure.
41 |
42 | ```json
43 | [
44 | [
45 | "Svg",
46 | { "viewBox": "0 0 300 600" },
47 | [
48 | [
49 | "G",
50 | [
51 | ["Path", { "fill": "#000", "d":"13.508 n0180-149 ..."}],
52 | ["Path", { "fill": "#FFF", "strokeOpacity":"0.1", "d":"13.508 n0180-149 ..."}]
53 | ]
54 | ]
55 | ]
56 | ]
57 | ]
58 | ```
59 |
60 | You might notice that the following transformations has occurred:
61 |
62 | - The `svg` element has all it's properties removed except for `viewBox`. If no
63 | `viewBox` property is present, it should be calculated and added.
64 | - Tag names are transformed to be uppercase first, so they match `svgs`
65 | component names.
66 | - Attributes are transformed to be camelCase and then combined in to an objects
67 | which should be compatible with `react-native-svg` attributes.
68 | - Colors are optimized to small HEX codes if possible.
69 | - Child components are wrapped in an array [].
70 |
71 | Each element is transformed in to an array where the first item of the Array
72 | is the name of the tagName of the element which is transformed to be uppercase
73 | first to match the components from the `svgs` library. The second item of the
74 | array will either be:
75 |
76 | - An object with attributes that should be applied to the tag.
77 | - An array, that contains child elements for the given tag.
78 | - A string, which will be content for the element in the case of `Text` tags.
79 | - Nothing, no child elements or attributes are needed.
80 |
81 | See the `test/fixtures/index.js` file for more examples of the bundle structure
82 | and their resulting output.
83 |
84 | ### Bundle
85 |
86 | Creating a bundle of SVG assets is a straight forward process. The
87 | [structure](#structure) for assets is already known. The only thing it needs is
88 | an identifier for each asset. This should be a unique id as it will be used as
89 | `key` in the overall JSON structure and structure will be the value. A good
90 | practise is to use the filename of the asset key. So if you have a file with the
91 | name `example.svg` and `another.svg` you should end up with following bundle
92 | structure.
93 |
94 | ```json
95 | {
96 | "example": [
97 | ["Text", "Generated structure"]
98 | ],
99 | "another": [
100 | ["G", ["Text", { "stroke": 1 }, "Another"]]
101 | ]
102 | }
103 | ```
104 |
105 | ### Serialization
106 |
107 | The current implementation assumes that JSON is used serialization format. Run
108 | the resulting bundle through your JSON encoder and upload it to the cloud.
109 |
--------------------------------------------------------------------------------
/codecov.yml:
--------------------------------------------------------------------------------
1 | coverage:
2 | parsers:
3 | javascript:
4 | enable_partials: yes
5 | status:
6 | project:
7 | default:
8 | target: "80%"
9 | patch:
10 | enabled: false
11 |
--------------------------------------------------------------------------------
/examples/reactnative/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-native"]
3 | }
4 |
--------------------------------------------------------------------------------
/examples/reactnative/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/examples/reactnative/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/examples/reactnative/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 |
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 |
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 |
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 |
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 |
--------------------------------------------------------------------------------
/examples/reactnative/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/examples/reactnative/App.js:
--------------------------------------------------------------------------------
1 | import Provider, { Asset } from 'asset-provider';
2 | import React, { Component } from 'react';
3 | import {
4 | Platform,
5 | StyleSheet,
6 | Text,
7 | View
8 | } from 'react-native';
9 |
10 | const instructions = Platform.select({
11 | ios: 'Press Cmd+R to reload,\n' +
12 | 'Cmd+D or shake for dev menu',
13 | android: 'Double tap R on your keyboard to reload,\n' +
14 | 'Shake or press menu button for dev menu',
15 | });
16 |
17 | export default class App extends Component<{}> {
18 | render() {
19 | return (
20 |
21 |
22 | {instructions}
23 |
24 |
25 |
26 |
27 |
28 | Loading Assets
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | const styles = StyleSheet.create({
42 | container: {
43 | flex: 1,
44 | justifyContent: 'center',
45 | alignItems: 'center',
46 | backgroundColor: '#F5FCFF',
47 | },
48 | loading: {
49 | fontSize: 20,
50 | textAlign: 'center',
51 | margin: 10,
52 | },
53 | instructions: {
54 | textAlign: 'center',
55 | color: '#333333',
56 | marginBottom: 5,
57 | },
58 | });
59 |
--------------------------------------------------------------------------------
/examples/reactnative/README.md:
--------------------------------------------------------------------------------
1 | # react-native
2 |
3 | A small demo that implements the `asset-provider` in a React-Native
4 | application.
5 |
6 | ## Starting the demo
7 |
8 | Make sure that all dependencies are installed (we do assume that you already
9 | have your machine setup for React-Native development):
10 |
11 | ```
12 | npm install .
13 | ```
14 |
15 | In addition to the dependencies of this repository you also need to install
16 | the dependencies of the `web` example as we will use that web server to
17 | serve the svg bundle to the React-Native application.
18 |
19 | ```
20 | cd .. && cd web && npm install .
21 | ```
22 |
23 | Once all dependencies are installed we need to start the web server of the `web`
24 | example. So navigate back to `web` folder and run:
25 |
26 | ```
27 | npm start
28 | ```
29 |
30 | Once the application is started we can boot up our React-Native application:
31 |
32 | ```
33 | react-native run-ios
34 | react-native run-android
35 | ```
36 |
37 | ## How is the demo setup
38 |
39 | ### App.js
40 |
41 | This is the entry point of the application and where we've implemented the
42 | `asset-provider`. So how is it build up?
43 |
44 | - The first and basically only notable change here is that we needed to install
45 | `react-native-svg` as a dependency of the project so we can render SVG
46 | on the devices. The rest is the same as on the web.
47 | - The `` and `` components are imported from the
48 | `asset-provider` module.
49 | - We create a `` component that downloads the `homer`, `godaddy`
50 | and `tiger` svg from the generated bundle.
51 | - We add ``'s as child components of the `` and reference the
52 | assets using the `name` property of the ``.
53 | - One of the ``s has a `` component as child node. This will
54 | be visible while we are download the asset from our server and will be
55 | replaced with the actual asset once the bundle is downloaded.
56 |
57 | ### Server
58 |
59 | The server aspect of the example is documented at the `web` example.
60 |
--------------------------------------------------------------------------------
/examples/reactnative/__tests__/App.js:
--------------------------------------------------------------------------------
1 | import 'react-native';
2 | import React from 'react';
3 | import App from '../App';
4 |
5 | // Note: test renderer must be required after react-native.
6 | import renderer from 'react-test-renderer';
7 |
8 | it('renders correctly', () => {
9 | const tree = renderer.create(
10 |
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | lib_deps = []
12 |
13 | for jarfile in glob(['libs/*.jar']):
14 | name = 'jars__' + jarfile[jarfile.rindex('/') + 1: jarfile.rindex('.jar')]
15 | lib_deps.append(':' + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
21 | for aarfile in glob(['libs/*.aar']):
22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')]
23 | lib_deps.append(':' + name)
24 | android_prebuilt_aar(
25 | name = name,
26 | aar = aarfile,
27 | )
28 |
29 | android_library(
30 | name = "all-libs",
31 | exported_deps = lib_deps,
32 | )
33 |
34 | android_library(
35 | name = "app-code",
36 | srcs = glob([
37 | "src/main/java/**/*.java",
38 | ]),
39 | deps = [
40 | ":all-libs",
41 | ":build_config",
42 | ":res",
43 | ],
44 | )
45 |
46 | android_build_config(
47 | name = "build_config",
48 | package = "com.reactnative",
49 | )
50 |
51 | android_resource(
52 | name = "res",
53 | package = "com.reactnative",
54 | res = "src/main/res",
55 | )
56 |
57 | android_binary(
58 | name = "app",
59 | keystore = "//android/keystores:debug",
60 | manifest = "src/main/AndroidManifest.xml",
61 | package_type = "debug",
62 | deps = [
63 | ":app-code",
64 | ],
65 | )
66 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation
19 | * entryFile: "index.android.js",
20 | *
21 | * // whether to bundle JS and assets in debug mode
22 | * bundleInDebug: false,
23 | *
24 | * // whether to bundle JS and assets in release mode
25 | * bundleInRelease: true,
26 | *
27 | * // whether to bundle JS and assets in another build variant (if configured).
28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
29 | * // The configuration property can be in the following formats
30 | * // 'bundleIn${productFlavor}${buildType}'
31 | * // 'bundleIn${buildType}'
32 | * // bundleInFreeDebug: true,
33 | * // bundleInPaidRelease: true,
34 | * // bundleInBeta: true,
35 | *
36 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
37 | * // for example: to disable dev mode in the staging build type (if configured)
38 | * devDisabledInStaging: true,
39 | * // The configuration property can be in the following formats
40 | * // 'devDisabledIn${productFlavor}${buildType}'
41 | * // 'devDisabledIn${buildType}'
42 | *
43 | * // the root of your project, i.e. where "package.json" lives
44 | * root: "../../",
45 | *
46 | * // where to put the JS bundle asset in debug mode
47 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
48 | *
49 | * // where to put the JS bundle asset in release mode
50 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
51 | *
52 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
53 | * // require('./image.png')), in debug mode
54 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
55 | *
56 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
57 | * // require('./image.png')), in release mode
58 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
59 | *
60 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
61 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
62 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
63 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
64 | * // for example, you might want to remove it from here.
65 | * inputExcludes: ["android/**", "ios/**"],
66 | *
67 | * // override which node gets called and with what additional arguments
68 | * nodeExecutableAndArgs: ["node"],
69 | *
70 | * // supply additional arguments to the packager
71 | * extraPackagerArgs: []
72 | * ]
73 | */
74 |
75 | project.ext.react = [
76 | entryFile: "index.js"
77 | ]
78 |
79 | apply from: "../../node_modules/react-native/react.gradle"
80 |
81 | /**
82 | * Set this to true to create two separate APKs instead of one:
83 | * - An APK that only works on ARM devices
84 | * - An APK that only works on x86 devices
85 | * The advantage is the size of the APK is reduced by about 4MB.
86 | * Upload all the APKs to the Play Store and people will download
87 | * the correct one based on the CPU architecture of their device.
88 | */
89 | def enableSeparateBuildPerCPUArchitecture = false
90 |
91 | /**
92 | * Run Proguard to shrink the Java bytecode in release builds.
93 | */
94 | def enableProguardInReleaseBuilds = false
95 |
96 | android {
97 | compileSdkVersion 23
98 | buildToolsVersion "23.0.1"
99 |
100 | defaultConfig {
101 | applicationId "com.reactnative"
102 | minSdkVersion 16
103 | targetSdkVersion 22
104 | versionCode 1
105 | versionName "1.0"
106 | ndk {
107 | abiFilters "armeabi-v7a", "x86"
108 | }
109 | }
110 | splits {
111 | abi {
112 | reset()
113 | enable enableSeparateBuildPerCPUArchitecture
114 | universalApk false // If true, also generate a universal APK
115 | include "armeabi-v7a", "x86"
116 | }
117 | }
118 | buildTypes {
119 | release {
120 | minifyEnabled enableProguardInReleaseBuilds
121 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
122 | }
123 | }
124 | // applicationVariants are e.g. debug, release
125 | applicationVariants.all { variant ->
126 | variant.outputs.each { output ->
127 | // For each separate APK per architecture, set a unique version code as described here:
128 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
129 | def versionCodes = ["armeabi-v7a":1, "x86":2]
130 | def abi = output.getFilter(OutputFile.ABI)
131 | if (abi != null) { // null for the universal-debug, universal-release variants
132 | output.versionCodeOverride =
133 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
134 | }
135 | }
136 | }
137 | }
138 |
139 | dependencies {
140 | compile project(':react-native-svg')
141 | compile fileTree(dir: "libs", include: ["*.jar"])
142 | compile "com.android.support:appcompat-v7:23.0.1"
143 | compile "com.facebook.react:react-native:+" // From node_modules
144 | }
145 |
146 | // Run this once to be able to run the application with BUCK
147 | // puts all compile dependencies into folder libs for BUCK to use
148 | task copyDownloadableDepsToLibs(type: Copy) {
149 | from configurations.compile
150 | into 'libs'
151 | }
152 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
12 | # If your project uses WebView with JS, uncomment the following
13 | # and specify the fully qualified class name to the JavaScript interface
14 | # class:
15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
16 | # public *;
17 | #}
18 |
19 | # Disabling obfuscation is useful if you collect stack traces from production crashes
20 | # (unless you are using a system that supports de-obfuscate the stack traces).
21 | -dontobfuscate
22 |
23 | # React Native
24 |
25 | # Keep our interfaces so they can be used by other ProGuard rules.
26 | # See http://sourceforge.net/p/proguard/bugs/466/
27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
30 |
31 | # Do not strip any method/class that is annotated with @DoNotStrip
32 | -keep @com.facebook.proguard.annotations.DoNotStrip class *
33 | -keep @com.facebook.common.internal.DoNotStrip class *
34 | -keepclassmembers class * {
35 | @com.facebook.proguard.annotations.DoNotStrip *;
36 | @com.facebook.common.internal.DoNotStrip *;
37 | }
38 |
39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
40 | void set*(***);
41 | *** get*();
42 | }
43 |
44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; }
46 | -keepclassmembers,includedescriptorclasses class * { native ; }
47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; }
48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; }
49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; }
50 |
51 | -dontwarn com.facebook.react.**
52 |
53 | # TextLayoutBuilder uses a non-public Android constructor within StaticLayout.
54 | # See libs/proxy/src/main/java/com/facebook/fbui/textlayoutbuilder/proxy for details.
55 | -dontwarn android.text.StaticLayout
56 |
57 | # okhttp
58 |
59 | -keepattributes Signature
60 | -keepattributes *Annotation*
61 | -keep class okhttp3.** { *; }
62 | -keep interface okhttp3.** { *; }
63 | -dontwarn okhttp3.**
64 |
65 | # okio
66 |
67 | -keep class sun.misc.Unsafe { *; }
68 | -dontwarn java.nio.file.*
69 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
70 | -dontwarn okio.**
71 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
12 |
13 |
19 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/java/com/reactnative/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.reactnative;
2 |
3 | import com.facebook.react.ReactActivity;
4 |
5 | public class MainActivity extends ReactActivity {
6 |
7 | /**
8 | * Returns the name of the main component registered from JavaScript.
9 | * This is used to schedule rendering of the component.
10 | */
11 | @Override
12 | protected String getMainComponentName() {
13 | return "reactnative";
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/java/com/reactnative/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.reactnative;
2 |
3 | import android.app.Application;
4 |
5 | import com.facebook.react.ReactApplication;
6 | import com.horcrux.svg.SvgPackage;
7 | import com.facebook.react.ReactNativeHost;
8 | import com.facebook.react.ReactPackage;
9 | import com.facebook.react.shell.MainReactPackage;
10 | import com.facebook.soloader.SoLoader;
11 |
12 | import java.util.Arrays;
13 | import java.util.List;
14 |
15 | public class MainApplication extends Application implements ReactApplication {
16 |
17 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
18 | @Override
19 | public boolean getUseDeveloperSupport() {
20 | return BuildConfig.DEBUG;
21 | }
22 |
23 | @Override
24 | protected List getPackages() {
25 | return Arrays.asList(
26 | new MainReactPackage(),
27 | new SvgPackage()
28 | );
29 | }
30 |
31 | @Override
32 | protected String getJSMainModuleName() {
33 | return "index";
34 | }
35 | };
36 |
37 | @Override
38 | public ReactNativeHost getReactNativeHost() {
39 | return mReactNativeHost;
40 | }
41 |
42 | @Override
43 | public void onCreate() {
44 | super.onCreate();
45 | SoLoader.init(this, /* native exopackage */ false);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy/asset-system/1d5380cd1aef38795aa86330a4365c1c4a2a03de/examples/reactnative/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy/asset-system/1d5380cd1aef38795aa86330a4365c1c4a2a03de/examples/reactnative/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy/asset-system/1d5380cd1aef38795aa86330a4365c1c4a2a03de/examples/reactnative/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy/asset-system/1d5380cd1aef38795aa86330a4365c1c4a2a03de/examples/reactnative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | reactnative
3 |
4 |
--------------------------------------------------------------------------------
/examples/reactnative/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/examples/reactnative/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | repositories {
5 | jcenter()
6 | }
7 | dependencies {
8 | classpath 'com.android.tools.build:gradle:2.2.3'
9 |
10 | // NOTE: Do not place your application dependencies here; they belong
11 | // in the individual module build.gradle files
12 | }
13 | }
14 |
15 | allprojects {
16 | repositories {
17 | mavenLocal()
18 | jcenter()
19 | maven {
20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
21 | url "$rootDir/../node_modules/react-native/android"
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/reactnative/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m
13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | android.useDeprecatedNdk=true
21 |
--------------------------------------------------------------------------------
/examples/reactnative/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/godaddy/asset-system/1d5380cd1aef38795aa86330a4365c1c4a2a03de/examples/reactnative/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/examples/reactnative/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | zipStoreBase=GRADLE_USER_HOME
4 | zipStorePath=wrapper/dists
5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
6 |
--------------------------------------------------------------------------------
/examples/reactnative/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | ##############################################################################
4 | ##
5 | ## Gradle start up script for UN*X
6 | ##
7 | ##############################################################################
8 |
9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
10 | DEFAULT_JVM_OPTS=""
11 |
12 | APP_NAME="Gradle"
13 | APP_BASE_NAME=`basename "$0"`
14 |
15 | # Use the maximum available, or set MAX_FD != -1 to use that value.
16 | MAX_FD="maximum"
17 |
18 | warn ( ) {
19 | echo "$*"
20 | }
21 |
22 | die ( ) {
23 | echo
24 | echo "$*"
25 | echo
26 | exit 1
27 | }
28 |
29 | # OS specific support (must be 'true' or 'false').
30 | cygwin=false
31 | msys=false
32 | darwin=false
33 | case "`uname`" in
34 | CYGWIN* )
35 | cygwin=true
36 | ;;
37 | Darwin* )
38 | darwin=true
39 | ;;
40 | MINGW* )
41 | msys=true
42 | ;;
43 | esac
44 |
45 | # For Cygwin, ensure paths are in UNIX format before anything is touched.
46 | if $cygwin ; then
47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
48 | fi
49 |
50 | # Attempt to set APP_HOME
51 | # Resolve links: $0 may be a link
52 | PRG="$0"
53 | # Need this for relative symlinks.
54 | while [ -h "$PRG" ] ; do
55 | ls=`ls -ld "$PRG"`
56 | link=`expr "$ls" : '.*-> \(.*\)$'`
57 | if expr "$link" : '/.*' > /dev/null; then
58 | PRG="$link"
59 | else
60 | PRG=`dirname "$PRG"`"/$link"
61 | fi
62 | done
63 | SAVED="`pwd`"
64 | cd "`dirname \"$PRG\"`/" >&-
65 | APP_HOME="`pwd -P`"
66 | cd "$SAVED" >&-
67 |
68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
69 |
70 | # Determine the Java command to use to start the JVM.
71 | if [ -n "$JAVA_HOME" ] ; then
72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
73 | # IBM's JDK on AIX uses strange locations for the executables
74 | JAVACMD="$JAVA_HOME/jre/sh/java"
75 | else
76 | JAVACMD="$JAVA_HOME/bin/java"
77 | fi
78 | if [ ! -x "$JAVACMD" ] ; then
79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
80 |
81 | Please set the JAVA_HOME variable in your environment to match the
82 | location of your Java installation."
83 | fi
84 | else
85 | JAVACMD="java"
86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
87 |
88 | Please set the JAVA_HOME variable in your environment to match the
89 | location of your Java installation."
90 | fi
91 |
92 | # Increase the maximum file descriptors if we can.
93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
94 | MAX_FD_LIMIT=`ulimit -H -n`
95 | if [ $? -eq 0 ] ; then
96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
97 | MAX_FD="$MAX_FD_LIMIT"
98 | fi
99 | ulimit -n $MAX_FD
100 | if [ $? -ne 0 ] ; then
101 | warn "Could not set maximum file descriptor limit: $MAX_FD"
102 | fi
103 | else
104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
105 | fi
106 | fi
107 |
108 | # For Darwin, add options to specify how the application appears in the dock
109 | if $darwin; then
110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
111 | fi
112 |
113 | # For Cygwin, switch paths to Windows format before running java
114 | if $cygwin ; then
115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
117 |
118 | # We build the pattern for arguments to be converted via cygpath
119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
120 | SEP=""
121 | for dir in $ROOTDIRSRAW ; do
122 | ROOTDIRS="$ROOTDIRS$SEP$dir"
123 | SEP="|"
124 | done
125 | OURCYGPATTERN="(^($ROOTDIRS))"
126 | # Add a user-defined pattern to the cygpath arguments
127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
129 | fi
130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
131 | i=0
132 | for arg in "$@" ; do
133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
135 |
136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
138 | else
139 | eval `echo args$i`="\"$arg\""
140 | fi
141 | i=$((i+1))
142 | done
143 | case $i in
144 | (0) set -- ;;
145 | (1) set -- "$args0" ;;
146 | (2) set -- "$args0" "$args1" ;;
147 | (3) set -- "$args0" "$args1" "$args2" ;;
148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
154 | esac
155 | fi
156 |
157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
158 | function splitJvmOpts() {
159 | JVM_OPTS=("$@")
160 | }
161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
163 |
164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
165 |
--------------------------------------------------------------------------------
/examples/reactnative/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @if "%DEBUG%" == "" @echo off
2 | @rem ##########################################################################
3 | @rem
4 | @rem Gradle startup script for Windows
5 | @rem
6 | @rem ##########################################################################
7 |
8 | @rem Set local scope for the variables with windows NT shell
9 | if "%OS%"=="Windows_NT" setlocal
10 |
11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
12 | set DEFAULT_JVM_OPTS=
13 |
14 | set DIRNAME=%~dp0
15 | if "%DIRNAME%" == "" set DIRNAME=.
16 | set APP_BASE_NAME=%~n0
17 | set APP_HOME=%DIRNAME%
18 |
19 | @rem Find java.exe
20 | if defined JAVA_HOME goto findJavaFromJavaHome
21 |
22 | set JAVA_EXE=java.exe
23 | %JAVA_EXE% -version >NUL 2>&1
24 | if "%ERRORLEVEL%" == "0" goto init
25 |
26 | echo.
27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
28 | echo.
29 | echo Please set the JAVA_HOME variable in your environment to match the
30 | echo location of your Java installation.
31 |
32 | goto fail
33 |
34 | :findJavaFromJavaHome
35 | set JAVA_HOME=%JAVA_HOME:"=%
36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
37 |
38 | if exist "%JAVA_EXE%" goto init
39 |
40 | echo.
41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
42 | echo.
43 | echo Please set the JAVA_HOME variable in your environment to match the
44 | echo location of your Java installation.
45 |
46 | goto fail
47 |
48 | :init
49 | @rem Get command-line arguments, handling Windowz variants
50 |
51 | if not "%OS%" == "Windows_NT" goto win9xME_args
52 | if "%@eval[2+2]" == "4" goto 4NT_args
53 |
54 | :win9xME_args
55 | @rem Slurp the command line arguments.
56 | set CMD_LINE_ARGS=
57 | set _SKIP=2
58 |
59 | :win9xME_args_slurp
60 | if "x%~1" == "x" goto execute
61 |
62 | set CMD_LINE_ARGS=%*
63 | goto execute
64 |
65 | :4NT_args
66 | @rem Get arguments from the 4NT Shell from JP Software
67 | set CMD_LINE_ARGS=%$
68 |
69 | :execute
70 | @rem Setup the command line
71 |
72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
73 |
74 | @rem Execute Gradle
75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
76 |
77 | :end
78 | @rem End local scope for the variables with windows NT shell
79 | if "%ERRORLEVEL%"=="0" goto mainEnd
80 |
81 | :fail
82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
83 | rem the _cmd.exe /c_ return code!
84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
85 | exit /b 1
86 |
87 | :mainEnd
88 | if "%OS%"=="Windows_NT" endlocal
89 |
90 | :omega
91 |
--------------------------------------------------------------------------------
/examples/reactnative/android/keystores/BUCK:
--------------------------------------------------------------------------------
1 | keystore(
2 | name = "debug",
3 | properties = "debug.keystore.properties",
4 | store = "debug.keystore",
5 | visibility = [
6 | "PUBLIC",
7 | ],
8 | )
9 |
--------------------------------------------------------------------------------
/examples/reactnative/android/keystores/debug.keystore.properties:
--------------------------------------------------------------------------------
1 | key.store=debug.keystore
2 | key.alias=androiddebugkey
3 | key.store.password=android
4 | key.alias.password=android
5 |
--------------------------------------------------------------------------------
/examples/reactnative/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'reactnative'
2 | include ':react-native-svg'
3 | project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
4 |
5 | include ':app'
6 |
--------------------------------------------------------------------------------
/examples/reactnative/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "reactnative",
3 | "displayName": "reactnative"
4 | }
--------------------------------------------------------------------------------
/examples/reactnative/index.js:
--------------------------------------------------------------------------------
1 | import { AppRegistry } from 'react-native';
2 | import App from './App';
3 |
4 | AppRegistry.registerComponent('reactnative', () => App);
5 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative-tvOS/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 | LSRequiresIPhoneOS
24 |
25 | UILaunchStoryboardName
26 | LaunchScreen
27 | UIRequiredDeviceCapabilities
28 |
29 | armv7
30 |
31 | UISupportedInterfaceOrientations
32 |
33 | UIInterfaceOrientationPortrait
34 | UIInterfaceOrientationLandscapeLeft
35 | UIInterfaceOrientationLandscapeRight
36 |
37 | UIViewControllerBasedStatusBarAppearance
38 |
39 | NSLocationWhenInUseUsageDescription
40 |
41 | NSAppTransportSecurity
42 |
43 |
44 | NSExceptionDomains
45 |
46 | localhost
47 |
48 | NSExceptionAllowsInsecureHTTPLoads
49 |
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative-tvOSTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative.xcodeproj/xcshareddata/xcschemes/reactnative-tvOS.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative.xcodeproj/xcshareddata/xcschemes/reactnative.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
29 |
35 |
36 |
37 |
43 |
49 |
50 |
51 |
52 |
53 |
58 |
59 |
61 |
67 |
68 |
69 |
70 |
71 |
77 |
78 |
79 |
80 |
81 |
82 |
92 |
94 |
100 |
101 |
102 |
103 |
104 |
105 |
111 |
113 |
119 |
120 |
121 |
122 |
124 |
125 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/AppDelegate.h:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 |
12 | @interface AppDelegate : UIResponder
13 |
14 | @property (nonatomic, strong) UIWindow *window;
15 |
16 | @end
17 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/AppDelegate.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import "AppDelegate.h"
11 |
12 | #import
13 | #import
14 |
15 | @implementation AppDelegate
16 |
17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
18 | {
19 | NSURL *jsCodeLocation;
20 |
21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
22 |
23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
24 | moduleName:@"reactnative"
25 | initialProperties:nil
26 | launchOptions:launchOptions];
27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
28 |
29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
30 | UIViewController *rootViewController = [UIViewController new];
31 | rootViewController.view = rootView;
32 | self.window.rootViewController = rootViewController;
33 | [self.window makeKeyAndVisible];
34 | return YES;
35 | }
36 |
37 | @end
38 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/Base.lproj/LaunchScreen.xib:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "size" : "29x29",
6 | "scale" : "2x"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "size" : "29x29",
11 | "scale" : "3x"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "size" : "40x40",
16 | "scale" : "2x"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "size" : "40x40",
21 | "scale" : "3x"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "size" : "60x60",
26 | "scale" : "2x"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "size" : "60x60",
31 | "scale" : "3x"
32 | }
33 | ],
34 | "info" : {
35 | "version" : 1,
36 | "author" : "xcode"
37 | }
38 | }
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | reactnative
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | 1.0
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 1
25 | LSRequiresIPhoneOS
26 |
27 | UILaunchStoryboardName
28 | LaunchScreen
29 | UIRequiredDeviceCapabilities
30 |
31 | armv7
32 |
33 | UISupportedInterfaceOrientations
34 |
35 | UIInterfaceOrientationPortrait
36 | UIInterfaceOrientationLandscapeLeft
37 | UIInterfaceOrientationLandscapeRight
38 |
39 | UIViewControllerBasedStatusBarAppearance
40 |
41 | NSLocationWhenInUseUsageDescription
42 |
43 | NSAppTransportSecurity
44 |
45 | NSAllowsLocalNetworking
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnative/main.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 |
12 | #import "AppDelegate.h"
13 |
14 | int main(int argc, char * argv[]) {
15 | @autoreleasepool {
16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnativeTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/examples/reactnative/ios/reactnativeTests/reactnativeTests.m:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | #import
11 | #import
12 |
13 | #import
14 | #import
15 |
16 | #define TIMEOUT_SECONDS 600
17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
18 |
19 | @interface reactnativeTests : XCTestCase
20 |
21 | @end
22 |
23 | @implementation reactnativeTests
24 |
25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
26 | {
27 | if (test(view)) {
28 | return YES;
29 | }
30 | for (UIView *subview in [view subviews]) {
31 | if ([self findSubviewInView:subview matching:test]) {
32 | return YES;
33 | }
34 | }
35 | return NO;
36 | }
37 |
38 | - (void)testRendersWelcomeScreen
39 | {
40 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
42 | BOOL foundElement = NO;
43 |
44 | __block NSString *redboxError = nil;
45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
46 | if (level >= RCTLogLevelError) {
47 | redboxError = message;
48 | }
49 | });
50 |
51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
54 |
55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
57 | return YES;
58 | }
59 | return NO;
60 | }];
61 | }
62 |
63 | RCTSetLogFunction(RCTDefaultLogFunction);
64 |
65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
67 | }
68 |
69 |
70 | @end
71 |
--------------------------------------------------------------------------------
/examples/reactnative/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "asset-system-react-native",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "node node_modules/react-native/local-cli/cli.js start",
7 | "test": "jest"
8 | },
9 | "dependencies": {
10 | "asset-provider": "latest",
11 | "react": "16.2.0",
12 | "react-native": "0.52.1",
13 | "react-native-svg": "^6.0.1-rc.3"
14 | },
15 | "devDependencies": {
16 | "babel-jest": "22.1.0",
17 | "babel-preset-react-native": "4.0.0",
18 | "jest": "22.1.4",
19 | "react-test-renderer": "16.2.0"
20 | },
21 | "jest": {
22 | "preset": "react-native"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/web/README.md:
--------------------------------------------------------------------------------
1 | # Web
2 |
3 | A small demo that illustrates how you could use the asset provider in your
4 | own web application.
5 |
6 | ## Starting the demo
7 |
8 | Make sure you have the dependencies installed for this demo:
9 |
10 | ```
11 | npm install .
12 | ```
13 |
14 | Once all dependencies are installed you can run the server using:
15 |
16 | ```
17 | npm start
18 | ```
19 |
20 | Once the server is started you can navigate your browser to:
21 |
22 | - [`http://localhost:8080`](http://localhost:8080)
23 |
24 | ## How is the demo setup
25 |
26 | There are 3 core files that drive this demo:
27 |
28 | ### index.js
29 |
30 | This is the actual file that implements the `assets-provider`. This file
31 | is converted to ES5 by the `server.js`. The application it self is rather
32 | simple:
33 |
34 | - Imports `asset-provider`, and it's `` and `` components.
35 | - Specify a modification hook for the `pants` property, this will be used to
36 | change the color of homer's pants on the fly.
37 | - Creates a wrapping `` that will load our `godaddy.svg` bundle. This
38 | bundle will only contain a single asset which is the GoDaddy logo.
39 | - Render the asset by adding `` as child node of the
40 | ``
41 | - To make things interesting we've added another `` as child which
42 | will load another bundle that contains the `homer` and `tiger` svgs.
43 | - Add 3 more `` as child elements of the
44 | extra ``. While `godaddy` is not available in this bundle, it
45 | will still render as the `` is aware of it's own context and
46 | will request the asset from the wrapping ``.
47 | - Set the property `pants=red` on of the `homer` assets to change the color of
48 | his pants from light blue to red.
49 | - Renders the Example component in the `example` container.
50 |
51 | ### server.js
52 |
53 | The server is in charge of serving the `html`, `js` and the `svgs` asset bundle.
54 |
55 | It comes with a dedicated API for generating bundles using the `asset-bundle`
56 | library. The URL structure is a following:
57 |
58 | - `http://localhost:8080/[lowercase names of the asset, separated by -].svgs`
59 |
60 | It uses the assets that are available in the `asset` folder that is in the
61 | root of this repository. So if you wish to generate a bundle containing just
62 | the GoDaddy.svg logo you would request:
63 |
64 | - http://localhost:8080/godaddy.svgs
65 |
66 | And if you wanted to include 3 svgs in your bundle you could request:
67 |
68 | - http://localhost:8080/godaddy-homer-tiger.svgs
69 |
70 | This gives you some insight on the bundles, and what they contain.
71 |
72 | ### index.html
73 |
74 | This is the default HTML page that gets loaded when you visit the URL. It's only
75 | use is to load the `index.js` so it starts the React application.
76 |
--------------------------------------------------------------------------------
/examples/web/babel.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | require('./server');
3 |
--------------------------------------------------------------------------------
/examples/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Asset Provider
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/web/index.js:
--------------------------------------------------------------------------------
1 | import Provider, { Asset, parser } from 'asset-provider';
2 | import React, { Component } from 'react';
3 | import { render } from 'react-dom';
4 |
5 | //
6 | // Add a small modifier for the assets, each time we see the `pants` property
7 | // on an this parser will be called for all paths, circles and what
8 | // not that was used to create the svg.
9 | //
10 | // We know that homer's pants is #669BC7 so we can target that fill color
11 | // and override it with the given value.
12 | //
13 | parser.modify('pants', function (attr, prop, child) {
14 | if (attr.fill !== '#669BC7') return;
15 |
16 | attr.fill = prop.pants;
17 | });
18 |
19 | class Example extends Component {
20 | render() {
21 | return (
22 |
23 |
24 |
Rendering a godaddy asset
25 |
26 |
27 | Loading text
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | );
39 | }
40 | }
41 |
42 | render(, document.getElementById('example'))
43 |
--------------------------------------------------------------------------------
/examples/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "asset-system-react",
3 | "version": "1.0.0",
4 | "description": "Examples of how the asset-provider works.",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "node babel.js"
8 | },
9 | "private": true,
10 | "license": "MIT",
11 | "browserify": {
12 | "transform": [
13 | "babelify"
14 | ]
15 | },
16 | "babel": {
17 | "plugins": [
18 | "transform-object-rest-spread"
19 | ],
20 | "presets": [
21 | "babel-preset-es2015",
22 | "babel-preset-react"
23 | ]
24 | },
25 | "dependencies": {
26 | "asset-bundle": "latest",
27 | "asset-provider": "latest",
28 | "babel-loader": "^7.1.2",
29 | "babel-plugin-transform-object-rest-spread": "^6.26.0",
30 | "babel-preset-es2015": "^6.24.1",
31 | "babel-preset-react": "^6.24.1",
32 | "babel-register": "^6.26.0",
33 | "babelify": "^8.0.0",
34 | "browserify": "^15.2.0",
35 | "memory-fs": "^0.4.1",
36 | "react": "^16.2.0",
37 | "react-dom": "^16.2.0",
38 | "webpack": "^4.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/examples/web/server.js:
--------------------------------------------------------------------------------
1 | import assets from '../../test/fixtures/index.js';
2 | import config from './webpack.config.js';
3 | import Bundle from 'asset-bundle';
4 | import MemoryFS from 'memory-fs';
5 | import webpack from 'webpack';
6 | import http from 'http';
7 | import path from 'path';
8 | import fs from 'fs';
9 |
10 | //
11 | // Setup fake file system for WebPack for the client code.
12 | //
13 | const fsys = new MemoryFS();
14 |
15 | /**
16 | * Serve the bundle.svgs.
17 | *
18 | * @param {Request} req HTTP request.
19 | * @param {Response} res HTTP response.
20 | * @private
21 | */
22 | function svgs(req, res) {
23 | const bundle = new Bundle(
24 | req.url.slice(1, -5).split('-').map(function map(name) {
25 | return assets[name];
26 | })
27 | );
28 |
29 | bundle.run(function (err, output) {
30 | if (err) throw err;
31 |
32 | res.setHeader('Content-Length', Buffer(output).length);
33 | res.writeHead(200, { 'Content-Type': 'text/plain' });
34 |
35 | res.end(output);
36 | });
37 | }
38 |
39 | /**
40 | * Serve the index.html
41 | *
42 | * @param {Request} req HTTP request.
43 | * @param {Response} res HTTP response.
44 | * @private
45 | */
46 | function html(req, res) {
47 | fs.readFile(path.join(__dirname, 'index.html'), function read(err, file) {
48 | if (err) throw err;
49 |
50 | res.setHeader('Content-Length', file.length);
51 | res.writeHead(200, { 'Content-Type': 'text/html' });
52 |
53 | res.end(file);
54 | });
55 | }
56 |
57 | /**
58 | * Serve the index.js client bundle.
59 | *
60 | * @param {Request} req HTTP request.
61 | * @param {Response} res HTTP response.
62 | * @private
63 | */
64 | function client(req, res) {
65 | const compiler = webpack(config);
66 | compiler.outputFileSystem = fsys;
67 |
68 | compiler.run((err, stats) => {
69 | const file = fsys.readFileSync(path.join(__dirname, 'dist', 'client.js'));
70 |
71 | res.setHeader('Content-Length', file.length);
72 | res.writeHead(200, { 'Content-Type': 'text/javascript' });
73 |
74 | res.end(file);
75 | });
76 | }
77 |
78 | //
79 | // Poor or lazy man's HTTP file server. Don't do this, it's bad.
80 | //
81 | const server = http.createServer((req, res) => {
82 | console.log('received request for url', req.url);
83 | const ext = path.extname(req.url);
84 |
85 | switch(ext) {
86 | case '.svgs':
87 | svgs(req, res);
88 | break;
89 |
90 | case '.js':
91 | client(req, res);
92 | break;
93 |
94 | default:
95 | html(req, res);
96 | }
97 | }).listen(8080);
98 |
99 | //
100 | // Output some information that we're live, ready to go.
101 | //
102 | console.log('Example server is running on http://localhost:8080');
103 |
--------------------------------------------------------------------------------
/examples/web/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | name: 'JS',
5 | entry: [
6 | path.join(__dirname, 'index.js')
7 | ],
8 | output: {
9 | path: path.join(__dirname, 'dist'),
10 | filename: 'client.js'
11 | },
12 | module: {
13 | rules: [{
14 | test: /\.jsx?$/,
15 | use: [{
16 | loader: 'babel-loader',
17 | options: {
18 | presets: [
19 | 'babel-preset-es2015',
20 | 'babel-preset-react'
21 | ]
22 | }
23 | }]
24 | }]
25 | }
26 | };
27 |
--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
1 | const Pipeline = require('asset-webpack');
2 | const List = require('asset-list');
3 | const path = require('path');
4 |
5 | module.exports = {
6 | entry: path.join(__dirname, 'index.js'),
7 | output: {
8 | path: path.resolve(__dirname, 'dist'),
9 | filename: 'output.js'
10 | },
11 |
12 | module: {
13 | loaders: [
14 | { test: /\.svg$/, loaders: ['file-loader'] }
15 | ]
16 | },
17 |
18 | plugins: [
19 | new Pipeline('bundle.svgs', {
20 | //
21 | // Set to `true` if you want to use the folder structure of the files as
22 | // basic namespacing.
23 | //
24 | namespace: true,
25 |
26 | plugins: [
27 | [List, {
28 | //
29 | // `asset-list` options here.
30 | //
31 | }]
32 | ]
33 | })
34 | ]
35 | };
36 |
--------------------------------------------------------------------------------
/examples/whrs.toml:
--------------------------------------------------------------------------------
1 | [files]
2 | dev = ['dist/bundle.svgs']
3 | test = ['dist/bundle.svgs']
4 | prod = ['dist/bundle.svgs']
5 |
--------------------------------------------------------------------------------
/greenkeeper.json:
--------------------------------------------------------------------------------
1 | {
2 | "groups": {
3 | "core": {
4 | "packages": [
5 | "parser/package.json",
6 | "bundle/package.json",
7 | "provider/package.json"
8 | ]
9 | },
10 | "tools": {
11 | "packages": [
12 | "list/package.json",
13 | "test/package.json",
14 | "webpack/package.json"
15 | ]
16 | }
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "asset-system",
3 | "version": "1.0.0",
4 | "description": "asset-system is a cross platform asset system for React and React-Native. This repo is the home for all asset- packages.",
5 | "main": "index.js",
6 | "scripts": {
7 | "publish:dimensions": "mono --publish dimensions",
8 | "publish:provider": "mono --publish provider",
9 | "publish:webpack": "mono --publish webpack",
10 | "publish:parser": "mono --publish parser",
11 | "publish:bundle": "mono --publish bundle",
12 | "publish:list": "mono --publish list",
13 | "test:dimensions": "mono --test dimensions",
14 | "test:provider": "mono --test provider",
15 | "test:webpack": "mono --test webpack",
16 | "test:parser": "mono --test parser",
17 | "test:bundle": "mono --test bundle",
18 | "test:list": "mono --test list",
19 | "test": "mono --test",
20 | "publish": "mono --publish",
21 | "install": "mono --install",
22 | "link": "mono --link"
23 | },
24 | "private": true,
25 | "repository": {
26 | "type": "git",
27 | "url": "git@github.com:godaddy/asset-system.git"
28 | },
29 | "keywords": [
30 | "asset"
31 | ],
32 | "babel": {
33 | "presets": [
34 | "@babel/preset-env",
35 | "@babel/preset-react"
36 | ]
37 | },
38 | "author": "GoDaddy Operating Company, LLC",
39 | "license": "MIT",
40 | "contributors": [
41 | "Arnout Kazemier "
42 | ],
43 | "devDependencies": {
44 | "@babel/core": "^7.1.2",
45 | "@babel/preset-env": "^7.1.0",
46 | "@babel/preset-react": "^7.0.0",
47 | "mono-repos": "^0.1.1"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/packages/bundle/.npmignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # OSX
6 | .DS_Store
7 |
8 | # Xcode
9 | build/
10 | *.pbxuser
11 | !default.pbxuser
12 | *.mode1v3
13 | !default.mode1v3
14 | *.mode2v3
15 | !default.mode2v3
16 | *.perspectivev3
17 | !default.perspectivev3
18 | xcuserdata
19 | *.xccheckout
20 | *.moved-aside
21 | DerivedData
22 | *.hmap
23 | *.ipa
24 | *.xcuserstate
25 | project.xcworkspace
26 |
27 | # Android/IntelliJ
28 | build/
29 | .idea
30 | .gradle
31 | local.properties
32 | *.iml
33 |
34 | # BUCK
35 | buck-out/
36 | \.buckd/
37 | *.keystore
38 |
39 | # fastlane
40 | #
41 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
42 | # screenshots whenever they are needed.
43 | # For more information about the recommended setup visit:
44 | # https://docs.fastlane.tools/best-practices/source-control/
45 |
46 | */fastlane/report.xml
47 | */fastlane/Preview.html
48 | */fastlane/screenshots
49 |
50 | # Runtime data
51 | pids
52 | *.pid
53 | *.seed
54 |
55 | # Directory for instrumented libs generated by jscoverage/JSCover
56 | lib-cov
57 |
58 | # Coverage directory used by tools like istanbul/nyc
59 | coverage
60 | .nyc_output
61 |
62 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
63 | .grunt
64 |
65 | # node-waf configuration
66 | .lock-wscript
67 |
68 | # Compiled binary addons (http://nodejs.org/api/addons.html)
69 | build/Release
70 |
71 | # Dependency directory and Node.js specific files
72 | node_modules
73 | npm-debug.log
74 | yarn-error.log
75 |
76 | # IDE
77 | .idea
78 | *.iml
79 |
80 | # Ignore build directories
81 | dist
82 |
83 | # Compiled source
84 | !lib
85 |
--------------------------------------------------------------------------------
/packages/bundle/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # CHANGELOG
2 |
3 | - Moved `dimensions` to it's own standalone project for re-use purposes.
4 |
5 | ### 4.1.0
6 |
7 | - Remove workaround to `await` page renders from puppeteer.
8 |
9 | ### 4.0.0
10 |
11 | - Major: Upgraded to use the latest `@babel/*` 7.0 packages.
12 |
13 | ### 3.0.1
14 |
15 | - Also lazy require the `puppeteer` library in our render method.
16 |
17 | ### 3.0.0
18 |
19 | - Removed `puppeteer` from the dependencies and made it an optional dependency
20 | instead as it needs to download 230mb+ files on installation each time for
21 | an edge case as documented in #13
22 |
23 | ### 2.1.0
24 |
25 | - Point main/browser to ES5 builds.
26 |
27 | ### 2.0.0
28 |
29 | - Bump to asset-parser@2.0.0
30 |
31 | ### 1.0.0
32 |
33 | - Initial public release.
34 |
--------------------------------------------------------------------------------
/packages/bundle/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2018 GoDaddy Operating Company, LLC.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/bundle/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "asset-bundle",
3 | "version": "4.1.0",
4 | "description": "Build process that transforms (multiple) SVG assets into a asset-parser compatible bundle",
5 | "main": "./lib",
6 | "browser": "./lib",
7 | "module": "./index",
8 | "react-native": "./index",
9 | "scripts": {
10 | "test:web": "mocha --colors --require setup-env test/*.test.js",
11 | "test": "npm run build && nyc --reporter=text --reporter=lcov npm run test:web",
12 | "prepublishOnly": "npm run build",
13 | "build": "rm -rf ./lib && babel ./index.js -d ./lib && babel ./walker/*.js -d ./lib/walker",
14 | "lint": "eslint-godaddy *.js ./test/*.js"
15 | },
16 | "dependencies": {
17 | "asset-dimensions": "^1.0.0",
18 | "asset-parser": "^3.0.0",
19 | "async": "^2.6.0",
20 | "camel-case": "^3.0.0",
21 | "cheerio": "^1.0.0-rc.2",
22 | "diagnostics": "^1.1.0",
23 | "react": "^16.2.0",
24 | "svgo": "^1.0.3"
25 | },
26 | "devDependencies": {
27 | "@babel/cli": "^7.1.2",
28 | "@babel/core": "^7.1.2",
29 | "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
30 | "@babel/preset-env": "^7.1.0",
31 | "@babel/preset-react": "^7.0.0",
32 | "@babel/register": "^7.0.0",
33 | "asset-test": "^1.0.0",
34 | "assume": "^1.5.2",
35 | "eslint": "^4.14.0",
36 | "eslint-config-godaddy": "^2.1.0",
37 | "eslint-plugin-json": "^1.2.0",
38 | "eslint-plugin-mocha": "^4.11.0",
39 | "eslint-plugin-react": "^7.5.1",
40 | "mocha": "^5.0.1",
41 | "nyc": "^11.4.1",
42 | "puppeteer": "^1.1.0",
43 | "setup-env": "^1.2.1"
44 | },
45 | "babel": {
46 | "plugins": [
47 | "@babel/plugin-proposal-object-rest-spread"
48 | ],
49 | "presets": [
50 | [
51 | "@babel/preset-env",
52 | {
53 | "targets": {
54 | "node": 9
55 | }
56 | }
57 | ],
58 | "@babel/preset-react"
59 | ]
60 | },
61 | "browserify": {
62 | "transform": [
63 | "babelify"
64 | ]
65 | },
66 | "nyc": {
67 | "exclude": [
68 | "lib"
69 | ]
70 | },
71 | "homepage": "https://github.com/godaddy/asset-system/tree/master/packages/bundle",
72 | "repository": {
73 | "type": "git",
74 | "url": "git@github.com:godaddy/asset-system.git"
75 | },
76 | "keywords": [
77 | "SVG",
78 | "asset",
79 | "bundle"
80 | ],
81 | "author": "GoDaddy.com Operating Company, LLC",
82 | "contributors": [
83 | "Arnout Kazemier "
84 | ],
85 | "license": "MIT"
86 | }
87 |
--------------------------------------------------------------------------------
/packages/bundle/test/snapshots.test.js:
--------------------------------------------------------------------------------
1 | import { decode } from 'asset-parser';
2 | import { fixtures } from 'asset-test';
3 | import { describe, it } from 'mocha';
4 | import Bundle from '../index';
5 | import assume from 'assume';
6 | import path from 'path';
7 | import fs from 'fs';
8 |
9 | /**
10 | * Small helper function to finding all the fixtures.
11 | *
12 | * @param {String} ext Extension name
13 | * @param {String} name File name
14 | * @returns {String} Absolute location
15 | * @private
16 | */
17 | function find(ext, name) {
18 | return path.join(fixtures, name + '.' + ext);
19 | }
20 |
21 | /**
22 | * List of all the fixtures we're testing.
23 | *
24 | * @type {Array}
25 | * @private
26 | */
27 | const tests = [
28 | 'tiger',
29 | 'homer',
30 | 'homer-no-viewbox',
31 | 'godaddy'
32 | ];
33 |
34 | describe('snapshots', function () {
35 | this.timeout(10 * 1000);
36 |
37 | let bundle;
38 | let svgs;
39 |
40 | before(function (next) {
41 | bundle = new Bundle(tests.map(find.bind(find, 'svg')));
42 |
43 | bundle.run(function run(err, str) {
44 | if (err) return next(err);
45 |
46 | decode(str, function (fail, payload) {
47 | if (fail) return next(fail);
48 |
49 | svgs = payload.data;
50 |
51 | next();
52 | });
53 | });
54 | });
55 |
56 | tests.forEach(function each(name) {
57 | it(`correctly transforms the ${name} fixture`, function () {
58 | const item = svgs[name];
59 | const output = JSON.parse(fs.readFileSync(find('json', name), 'utf-8'));
60 |
61 | assume(item).is.a('array');
62 | assume(item).deep.equals(output);
63 |
64 | //
65 | // Uncomment the following line if you want to change the new snapshot:
66 | //
67 | // - fs.writeFileSync(find('json', name), JSON.stringify(item), 'utf-8');
68 | });
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/packages/bundle/test/walker.test.js:
--------------------------------------------------------------------------------
1 | import { describe, it } from 'mocha';
2 | import * as walker from '../walker';
3 | import assume from 'assume';
4 |
5 | describe('walker', function () {
6 | describe('#componentName', function () {
7 | it('transforms svg elements to svgs component names', function () {
8 | assume(walker.componentName('tspan')).equals('TSpan');
9 | assume(walker.componentName('path')).equals('Path');
10 | assume(walker.componentName('radialGradient')).equals('RadialGradient');
11 | });
12 | });
13 |
14 | describe('#attributes', function () {
15 | it('camelCases the attributes', function () {
16 | const result = walker.attributes({
17 | 'stroke-width': '10px'
18 | });
19 |
20 | assume(result).has.length(1);
21 | assume(result.strokeWidth).equals('10px');
22 | });
23 |
24 | it('renames properties if needed', function () {
25 | const result = walker.attributes({
26 | class: 'blue'
27 | });
28 |
29 | assume(result).has.length(1);
30 | assume(result.className).equals('blue');
31 | });
32 |
33 | it('transforms values to number when possible', function () {
34 | const result = walker.attributes({
35 | height: '10'
36 | });
37 |
38 | assume(result).has.length(1);
39 | assume(result.height).equals(10);
40 | });
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/packages/bundle/walker/index.js:
--------------------------------------------------------------------------------
1 | import diagnostics from 'diagnostics';
2 | import camelCase from 'camel-case';
3 |
4 | //
5 | // Setup our debug util.
6 | //
7 | const debug = diagnostics('asset:bundle:walker');
8 |
9 | /**
10 | * Weird component names from svgs/react-native-svg that can't really be
11 | * transformed automatically using the componentName function.
12 | *
13 | * Naming things is hard..
14 | *
15 | * @type {Object}
16 | * @private
17 | */
18 | const names = {
19 | tspan: 'TSpan' // Not judging here but LOL WAT ARE YOU DOING.
20 | };
21 |
22 | /**
23 | * Transforms a given tagName to a `svgs` and `react-native-svg` compatible
24 | * component name.
25 | *
26 | * @param {String} tagName The node's tagName.
27 | * @returns {String} The transformed string.
28 | * @private
29 | */
30 | export function componentName(tagName) {
31 | if (names[tagName]) return names[tagName];
32 |
33 | const first = tagName.charAt(0).toUpperCase();
34 | return first + tagName.slice(1);
35 | }
36 |
37 | /**
38 | * List of properties that need to be renamed in order to be compatible in
39 | * React.
40 | *
41 | * @type {Object}
42 | * @private
43 | */
44 | const rename = {
45 | 'class': 'className'
46 | };
47 |
48 | /**
49 | * Transform attribute names to their correct JavaScript equivs.
50 | *
51 | * @param {Object} attr Attributes that needs to be transformed
52 | * @returns {Object} Transformed attributes.
53 | * @private
54 | */
55 | export function attributes(attr) {
56 | return Object.keys(attr).reduce(function reduce(memo, key) {
57 | const name = rename[key] ? rename[key] : camelCase(key);
58 | let value = attr[key];
59 |
60 | if (!isNaN(+value)) value = +value;
61 |
62 | memo[name] = value;
63 | return memo;
64 | }, {});
65 | }
66 |
67 | /**
68 | * Walk the DOM tree and generate the required structures.
69 | *
70 | * @param {Object} svg Information of a single SVG asset.
71 | * @param {Object} modify Additional modification hooks.
72 | * @param {Function} fn Error first completion callback.
73 | * @private
74 | */
75 | export default function walker(svg, modify, fn) {
76 | const { tree } = svg;
77 |
78 | /**
79 | * Iterate over all the children and transform them into the required
80 | * structure.
81 | *
82 | * @param {Object} root DOM root node.
83 | * @returns {Array} Parsed structure.
84 | * @private
85 | */
86 | function iterate(root) {
87 | const node = [];
88 | const element = tree(root);
89 | const attr = element.attr();
90 | const children = element.children();
91 |
92 | //
93 | // Transform the name of the tag to be a component.
94 | //
95 | let name = componentName(root.tagName);
96 | let attrs = {};
97 |
98 | //
99 | // Transform attributes to actual DOM properties.
100 | //
101 | if (attr && Object.keys(attr).length) {
102 | attrs = attributes(attr);
103 | }
104 |
105 | //
106 | // Edge case for the svg element, we want to NUKE all the Attributes
107 | // and introduce our new viewBox property if it exists.
108 | //
109 | if (name === 'Svg' && svg.viewBox) {
110 | debug(`introducing viewBox(${svg.viewBox}) on svg(${svg.name})`);
111 | attrs = { viewBox: svg.viewBox };
112 | }
113 |
114 | //
115 | // Process the modification hooks. So they can alter attributes or even
116 | // complete components.
117 | //
118 | Object.keys(modify).forEach((key) => {
119 | name = modify[key](attrs, element, name) || name;
120 | });
121 |
122 | //
123 | // All transformation have been completed, we can start assembling the
124 | // required structure:
125 | //
126 | // [ComponentName, { optional attributes }, [ optional children ]]
127 | //
128 | node.push(name);
129 | if (Object.keys(attrs).length) node.push(attrs)
130 | if (children.length) node.push(children.get().map(iterate));
131 |
132 | return node;
133 | }
134 |
135 | svg.struc = tree('svg').get().map(iterate)[0];
136 | fn(null, svg);
137 | }
138 |
--------------------------------------------------------------------------------
/packages/dimensions/.npmignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # OSX
6 | .DS_Store
7 |
8 | # Xcode
9 | build/
10 | *.pbxuser
11 | !default.pbxuser
12 | *.mode1v3
13 | !default.mode1v3
14 | *.mode2v3
15 | !default.mode2v3
16 | *.perspectivev3
17 | !default.perspectivev3
18 | xcuserdata
19 | *.xccheckout
20 | *.moved-aside
21 | DerivedData
22 | *.hmap
23 | *.ipa
24 | *.xcuserstate
25 | project.xcworkspace
26 |
27 | # Android/IntelliJ
28 | build/
29 | .idea
30 | .gradle
31 | local.properties
32 | *.iml
33 |
34 | # BUCK
35 | buck-out/
36 | \.buckd/
37 | *.keystore
38 |
39 | # fastlane
40 | #
41 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
42 | # screenshots whenever they are needed.
43 | # For more information about the recommended setup visit:
44 | # https://docs.fastlane.tools/best-practices/source-control/
45 |
46 | */fastlane/report.xml
47 | */fastlane/Preview.html
48 | */fastlane/screenshots
49 |
50 | # Runtime data
51 | pids
52 | *.pid
53 | *.seed
54 |
55 | # Directory for instrumented libs generated by jscoverage/JSCover
56 | lib-cov
57 |
58 | # Coverage directory used by tools like istanbul/nyc
59 | coverage
60 | .nyc_output
61 |
62 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
63 | .grunt
64 |
65 | # node-waf configuration
66 | .lock-wscript
67 |
68 | # Compiled binary addons (http://nodejs.org/api/addons.html)
69 | build/Release
70 |
71 | # Dependency directory and Node.js specific files
72 | node_modules
73 | npm-debug.log
74 | yarn-error.log
75 |
76 | # IDE
77 | .idea
78 | *.iml
79 |
80 | # Ignore build directories
81 | dist
82 |
83 | # Compiled source
84 | !lib
85 |
--------------------------------------------------------------------------------
/packages/dimensions/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # CHANGELOG
2 |
3 | ### 1.0.0
4 |
5 | - Initial public release, extracted from `asset-bundle`
6 |
--------------------------------------------------------------------------------
/packages/dimensions/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019 GoDaddy Operating Company, LLC.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/dimensions/README.md:
--------------------------------------------------------------------------------
1 | # asset-dimensions
2 |
3 | Extract the dimensions of a given SVG image. When no information can be
4 | extracted from the `viewBox` or `width` and `height` properties it will be
5 | rendered in a headless browser and the Bounding Box will be extracted from
6 | the rendered image and returned instead for guaranteed sizing information.
7 |
8 | ## Installation
9 |
10 | ```
11 | npm install --save asset-dimensions
12 | ```
13 |
14 | The module has an **optional** dependency on [`puppeteer`][puppeteer]. This
15 | module is used to resolve the `viewBox` of a given `svg` asset if there is no
16 | `viewBox` or `height/width` combination available on the asset.
17 |
18 | If these properties are missing on some of your assets you will print a warning
19 | and can decide to either manually update them, or install `puppeteer` and it
20 | will automatically extract the correct viewBox from your svg.
21 |
22 | ```
23 | npm install --save puppeteer
24 | ```
25 |
26 | This dependency is not listed as `optionalDependency` in the package.json so
27 | it needs to be manually installed. The reason for this is so we do not download
28 | the headless chrome browser by default when it's not needed for our users.
29 |
30 | ## Usage
31 |
32 | The module exposes as `async function` as default interface. This function
33 | expects an object as first argument with the following properties:
34 |
35 | - `file` The path to the svg that we're extracting information from. This will
36 | be used in the debug output when we fail to extract the dimensions so you know
37 | which file needs manual updating, or why `puppeteer` is required.
38 | - `source` The contents of the file as plain text.
39 | - `tree` DOM (`cheerio`) of the SVG.
40 |
41 | ```js
42 | import dimensions from 'asset-dimensions';
43 | import { readFileSync } from 'fs';
44 | import { load } from 'cheerio';
45 | import { join } from 'path';
46 |
47 | const file = join(__dirname, 'assets', 'file.svg');
48 | const source = readFileSync(file, 'utf-8');
49 |
50 | const result = await dimensions({
51 | tree: load(content, { decodeEntities: false }),
52 | content,
53 | file,
54 | });
55 |
56 | console.log(result);
57 | ```
58 |
59 | The returned `result` is an `object` that will have the following keys:
60 |
61 | - `width` Width of the asset.
62 | - `height` Height of the asset.
63 | - `x` y of the asset.
64 | - `y` x of the asset.
65 | - `viewBox` The viewBox constructed with the `height`, `width`, `x`, `y` props.
66 |
67 | ## License
68 |
69 | [MIT](LICENSE)
70 |
71 | [puppeteer]: https://github.com/GoogleChrome/puppeteer
72 |
--------------------------------------------------------------------------------
/packages/dimensions/index.js:
--------------------------------------------------------------------------------
1 | import render from './render';
2 |
3 | /**
4 | * Really stupid simple warning output.
5 | *
6 | * @param {Array} lines The messages that needs to be spammed.
7 | * @private
8 | */
9 | function warning(lines) {
10 | lines.unshift(''); // Extra whitespace at the start.
11 | lines.push(''); // Extra whitespace at the end.
12 |
13 | lines.forEach(function each(line) {
14 | console.error('asset-dimensions:warning', line);
15 | });
16 | }
17 |
18 | /**
19 | * Compile a viewBox from the given.
20 | *
21 | * @param {Object} details The width/height for the viewBox.
22 | * @returns {Object} Dimensions, and viewbox of the svg asset.
23 | * @private
24 | */
25 | function viewBox({ width, height, x = 0, y = 0 }) {
26 | return {
27 | viewBox: `${x} ${y} ${width} ${height}`,
28 | height: +height,
29 | width: +width,
30 | x: +x,
31 | y: +y
32 | };
33 | }
34 |
35 | /**
36 | * Ensure that we have dimension information from the read SVG so we can generate
37 | * a valid viewBox for the SVG.
38 | *
39 | * @param {Object} svg Our internal SVG object.
40 | * @returns {Object} Bounding box, and viewBox information of the asset.
41 | * @public
42 | */
43 | export default async function dimensions({ file, source, tree }) {
44 | const root = tree('svg');
45 |
46 | //
47 | // If we already have a valid viewBox attribute, we can just continue and
48 | // mind our own business.. This should satisfy 99% of the cases when designers
49 | // provide us with SVG exports from applications such as Illustrator, Sketch.
50 | //
51 | if (root.attr('viewBox')) {
52 | const parsed = root.attr('viewBox').split(/[ ,]+/g);
53 |
54 | return viewBox({
55 | x: parseFloat(parsed[0], 10),
56 | y: parseFloat(parsed[1], 10),
57 | width: parseFloat(parsed[2], 10),
58 | height: parseFloat(parsed[3], 10)
59 | });
60 | }
61 |
62 | //
63 | // While we have `svg.info` that can contain height and width, these values
64 | // are extracted directly from the svg width/height attributes are should
65 | // not be considered valid. For example, our homer.svg in fixtures is
66 | // actually: width: 457.2821960449219, height: 490.2278747558594 but the
67 | // info object (that originates from svgo) said 500x500.
68 | //
69 | // In all these cases, the best thing we can do is extract the bounding box
70 | // from the browser.
71 | //
72 | // In order to get the best render result we need to strip the whole