├── .babelrc ├── .eslintignore ├── .eslintrc.yml ├── .gitignore ├── .travis.yml ├── README.md ├── package.json ├── qpm.json ├── quickly-skeleton.pro └── src ├── main.cpp └── qml ├── app.js └── main.qml /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0"], 3 | "plugins": [ 4 | "transform-decorators-legacy" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build 2 | -------------------------------------------------------------------------------- /.eslintrc.yml: -------------------------------------------------------------------------------- 1 | env: 2 | es6: true 3 | node: true 4 | extends: 'eslint:recommended' 5 | parser: babel-eslint 6 | parserOptions: 7 | sourceType: module 8 | plugins: 9 | - class-property 10 | rules: 11 | indent: 12 | - 2 13 | - 4 14 | linebreak-style: 15 | - 2 16 | - unix 17 | quotes: 18 | - 2 19 | - single 20 | semi: 21 | - 2 22 | - never 23 | arrow-spacing: 24 | - 2 25 | - before: true 26 | after: true 27 | no-confusing-arrow: 2 28 | no-var: 2 29 | no-console: 0 30 | object-shorthand: 31 | - 2 32 | - methods 33 | prefer-arrow-callback: 2 34 | prefer-const: 1 35 | prefer-template: 1 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | vendor 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | language: node_js 4 | node_js: 5 | - "5.1" 6 | 7 | install: 8 | - npm install -g qmlify 9 | - npm install 10 | - sudo add-apt-repository -y ppa:beineri/opt-qt551-trusty 11 | - sudo apt-get update 12 | - sudo apt-get -y install qt55declarative 13 | - sudo apt-get -y install qt55tools 14 | - sudo apt-get -y install xvfb 15 | 16 | script: 17 | - source /opt/qt55/bin/qt55-env.sh 18 | - npm run build 19 | - npm run build && mkdir -p qml_imports/Quickly && cp -r build/* src/qmldir qml_imports/Quickly && qmlify --import qml_imports -d test/build test && xvfb-run -a -s "-screen 0 800x600x24" qmltestrunner -input test/build -import qml_imports 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Quickly Skeleton 2 | ================ 3 | 4 | A starter kit for building a Qt/QML app with Quickly. 5 | 6 | ### Features 7 | 8 | * ESLint for JS code linting 9 | * QMLify for transpiling ES6 into QML-compatible JS 10 | * Babel config for ES6 with some ES7 features 11 | * The Quickly library with polyfills and more 12 | 13 | ### Usage 14 | 15 | Make sure you have Qt 5.5 or 5.6, npm, and [qpm](http://qpm.io) installed. Then run: 16 | 17 | npm install -g qmlify 18 | npm install 19 | qpm install 20 | 21 | To build the project: 22 | 23 | mkdir build 24 | cd build 25 | qmake .. 26 | make 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quickly-skeleton", 3 | "version": "0.0.1", 4 | "description": "A starter kit for building a Qt/QML app with Quickly", 5 | "private": true, 6 | "scripts": { 7 | "build": "qmlify . -d build", 8 | "run": "qmlscene build/main.qml" 9 | }, 10 | "author": "Michael Spencer ", 11 | "devDependencies": { 12 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 13 | "babel-preset-es2015": "^6.6.0", 14 | "babel-preset-stage-0": "^6.5.0", 15 | "babel-eslint": "^5.0.0", 16 | "eslint": "^2.4.0", 17 | "eslint-plugin-class-property": "0.0.3" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /qpm.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quickly-skeleton", 3 | "description": "A starter kit for building a Qt/QML app with Quickly", 4 | "dependencies": [ 5 | "com.sonrisesoftware.quickly@0.0.5" 6 | ], 7 | "license": "NONE", 8 | "pri_filename": "", 9 | "webpage": "" 10 | } -------------------------------------------------------------------------------- /quickly-skeleton.pro: -------------------------------------------------------------------------------- 1 | include(vendor/vendor.pri) 2 | 3 | QT += qml quick 4 | 5 | SOURCES += src/main.cpp 6 | QMLIFY += src/qml 7 | -------------------------------------------------------------------------------- /src/main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | int main(int argc, char *argv[]) 5 | { 6 | QGuiApplication app(argc, argv); 7 | 8 | QQmlApplicationEngine engine; 9 | QPM_INIT(engine) 10 | engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 11 | 12 | return app.exec(); 13 | } 14 | -------------------------------------------------------------------------------- /src/qml/app.js: -------------------------------------------------------------------------------- 1 | export function loadUrl(url) { 2 | return fetch(url) 3 | .then(response => response.text()) 4 | } 5 | -------------------------------------------------------------------------------- /src/qml/main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.5 2 | import QtQuick.Controls 1.3 3 | import QtQuick.Layouts 1.3 4 | import "app.js" as App 5 | 6 | ApplicationWindow { 7 | title: "Quickly Skeleton" 8 | visible: true 9 | width: 400 10 | height: 500 11 | 12 | toolBar: ToolBar { 13 | RowLayout { 14 | anchors.fill: parent 15 | spacing: 8 16 | 17 | TextField { 18 | id: textField 19 | Layout.fillWidth: true 20 | onAccepted: loadUrl(text) 21 | placeholderText: "Enter URL here" 22 | } 23 | 24 | Button { 25 | text: "Go!" 26 | onClicked: loadUrl(textField.text) 27 | } 28 | } 29 | } 30 | 31 | TextArea { 32 | id: textArea 33 | anchors { 34 | fill: parent 35 | margins: 8 36 | } 37 | 38 | text: "Enter a URL to view the source" 39 | } 40 | 41 | function loadUrl(url) { 42 | App.loadUrl(url) 43 | .then(function(text) { 44 | textArea.text = text; 45 | }) 46 | } 47 | } 48 | --------------------------------------------------------------------------------