Initial commit

.distignore

@@ -0,0 +1,7 @@
+/.wordpress-org
+/.git
+/.github
+/node_modules
+/assets
+/scripts
+/target

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+tabSize = 4
+trim_trailing_whitespace = true
+
+[*.yml]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/*
+build/*

.eslintrc

@@ -0,0 +1,58 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jest": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:cypress/recommended",
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": { "jsx": true },
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
+    "ignorePatterns": ["node_modules/", "pkg/", "build/"],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [],
+    "rules": {
+        "require-await": "error",
+        "quotes": ["error", "single", { "avoidEscape": true }],
+        "comma-dangle": ["error", "always-multiline"],
+        "array-element-newline": ["error", "consistent"],
+        "no-constant-condition": ["error", { "checkLoops": true }],
+        "no-multi-spaces": ["error"],
+        "semi": ["error", "never"],
+        "space-in-parens": ["error", "never"],
+        "key-spacing": ["error", { "afterColon": true }],
+        "space-infix-ops": ["error"],
+        "space-before-function-paren": [
+            "error",
+            {
+                "anonymous": "always",
+                "named": "never",
+                "asyncArrow": "always"
+            }
+        ],
+        "react/react-in-jsx-scope": "off",
+        "quote-props": ["error", "as-needed"],
+        "no-multiple-empty-lines": ["error", { "max": 1 }],
+        "@typescript-eslint/no-var-requires": "off",
+        "lines-around-comment": [
+            "error",
+            {
+                "beforeBlockComment": true,
+                "allowBlockStart": true
+            }
+        ]
+    },
+    "settings": { "react": { "version": "detect" } }
+}

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+# These are supported funding model platforms
+github: [kevinbatdorf]

.github/dependabot.yml

@@ -0,0 +1,11 @@
+version: 2
+updates:
+    - package-ecosystem: 'npm'
+      directory: '/'
+      schedule:
+          interval: 'monthly'
+
+    - package-ecosystem: 'cargo'
+      directory: '/'
+      schedule:
+          interval: 'monthly'

.github/workflows/build-production-zip.yml

@@ -0,0 +1,32 @@
+name: Build development zip file
+on: push
+jobs:
+    build:
+        name: Build zip file
+        runs-on: ubuntu-latest
+        steps:
+            - name: Check out code
+              uses: actions/checkout@v2
+            - name: npm install and build
+              run: |
+                  npm ci
+                  npm run build
+              env:
+                  CI: true
+
+            - name: Package
+              uses: actions/upload-artifact@v2
+              with:
+                  name: rust-starter
+                  retention-days: 5
+                  path: |
+                      ${{ github.workspace }}/
+                      !${{ github.workspace }}/node_modules/
+                      !${{ github.workspace }}/cypress/
+                      !${{ github.workspace }}/target/
+                      !${{ github.workspace }}/scripts/
+                      !${{ github.workspace }}/.git/
+                      !${{ github.workspace }}/.github/
+                      !${{ github.workspace }}/.wordpress-org/
+                      !${{ github.workspace }}/assets/
+                      !${{ github.workspace }}/scripts/

.github/workflows/cypress.yml

@@ -0,0 +1,44 @@
+name: Run Cypress test suite
+on:
+    push:
+    workflow_dispatch:
+    # schedule:
+    # At 08:00 on Thursday.
+    # - cron: "0 8 * * 4"
+jobs:
+    test:
+        name: Cypress
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                wp-version: [null, '"WordPress/WordPress#master"']
+        steps:
+            - name: Clone repo
+              uses: actions/checkout@v2
+            - name: Install server
+              run: |
+                  npm ci
+                  npm install -g @wordpress/env
+                  npm run build
+                  rm .wp-env.json
+            - name: Change WP version
+              uses: jsdaniell/[email protected]
+              with:
+                  name: 'wp-env.json'
+                  json: '{"core": ${{ matrix.wp-version }},"plugins":["."]}'
+            - name: Start server
+              run: wp-env start
+            - name: Cypress run
+              uses: cypress-io/github-action@v2
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            - uses: actions/upload-artifact@v2
+              if: always()
+              with:
+                  name: cypress-screenshots
+                  path: cypress/screenshots
+            - uses: actions/upload-artifact@v2
+              if: failure()
+              with:
+                  name: cypress-videos
+                  path: cypress/videos

.github/workflows/release-to-wp-org.yml

@@ -0,0 +1,38 @@
+name: Deploy to WordPress.org
+on:
+    release:
+        types: [published]
+jobs:
+    tag:
+        name: Make release
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+
+            - name: npm install and build
+              run: |
+                  npm ci
+                  npm run build
+              env:
+                  CI: true
+
+            - name: WordPress Plugin Deploy
+              id: deploy
+              uses: 10up/action-wordpress-plugin-deploy@stable
+              with:
+                  generate-zip: true
+              env:
+                  SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}
+                  SVN_USERNAME: ${{ secrets.SVN_USERNAME }}
+                  SLUG: rust-starter
+
+            - name: Upload release asset
+              uses: actions/upload-release-asset@v1
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              with:
+                  upload_url: ${{ github.event.release.upload_url }}
+                  asset_path: ${{ steps.deploy.outputs.zip-path }}
+                  asset_name: ${{ github.event.repository.name }}.zip
+                  asset_content_type: application/zip

.github/workflows/update-wordpress-readme.yml

@@ -0,0 +1,24 @@
+name: Plugin asset/readme update
+on:
+    push:
+        branches:
+            - main
+jobs:
+    trunk:
+        name: Push to WordPress.org
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: npm install and build
+              run: |
+                  npm ci
+                  npm run build
+              env:
+                  CI: true
+            - name: WordPress.org plugin asset/readme update
+              uses: 10up/action-wordpress-plugin-asset-update@stable
+              continue-on-error: true
+              env:
+                  SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}
+                  SVN_USERNAME: ${{ secrets.SVN_USERNAME }}
+                  SLUG: animate-in-view

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+build
+/target
+Cargo.lock
+
+cypress/screenshots/**/*
+cypress/videos/**/*
+cypress/downloads/**/*

.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+    trailingComma: 'all',
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+    bracketSameLine: true,
+    importOrder: ['^@wordpress/(.*)$', '<THIRD_PARTY_MODULES>', '^[./]'],
+    overrides: [
+        {
+            files: ['**/*.html'],
+            options: {
+                singleQuote: false,
+            },
+        },
+    ],
+}

.wp-env.json

@@ -0,0 +1,4 @@
+{
+    "core": null,
+    "plugins": ["."]
+}

Cargo.toml

@@ -0,0 +1,17 @@
+[package]
+name = "rust-starter"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+crate-type = ["cdylib"]
+path = "./server/lib.rs"
+
+[dependencies]
+getrandom = { version = "0.2", features = ["js"] }
+rand = "0.8.5"
+wasm-bindgen = "0.2.78"
+
+[dependencies.web-sys]
+version = "0.3.56"
+features = ["console"]

README.md

@@ -0,0 +1,51 @@
+# Gutenberg + Rust + TypeScript
+
+This is a minimum block plugin template to rapidly get started building WP blocks using Rust + TypeScript.
+
+-   Follow me on Twitter: https://twitter.com/kevinbatdorf
+-   Sponsor this package: https://github.com/sponsors/KevinBatdorf/
+
+### Getting Started
+
+-   Run `npm install` to install necessary packages
+-   Run `npm run rename <text-domain> <label>` to rename from rust-starter.
+-   Run `npm run start` to start the dev server
+-   Run `cypress open` to run interactive tests
+
+## Features
+
+This is an opinionated starter template that is designed to fit my personal workflow. However, I've added a small script to clean up and remove some features.
+
+-   To remove Tailwind, run `npm run eject tailwind`
+-   To remove Rust, run `npm run eject rust`
+-   To remove Cypress, run `npm run eject cypress`
+
+### Rust
+
+Rust is a systems programming language with a strong type system, memory safety, and great documentation. Beyond that it's fun to write and has a great community of helpful developers. Rust also compiles into WebAssembly, letting us utilize the power of systems programming on the web.
+
+Read more about Rust: https://www.rust-lang.org/
+
+### TypeScript
+
+TypeScript is essentially JavaScript with type safety. TypeScript will save you plenty of headaches while writing your code. Ever try to access a JS property on undefined? TypeScript will warn you before you even press save.
+
+Read more about TypeScript: https://www.typescriptlang.org/
+
+### Tailwind CSS (heavily scoped)
+
+Tailwind CSS is a utility framework designed for rapid building. Rather than maintaining CSS/scss files, you use specific class names directly in your markup, keeping the component logic, layout, and design in one place. You should default to WordPress components and classes when possible, and use Tailwind for everything beyond that.
+
+This starter repo builds on top of Tailwind in a few useful ways:
+
+-   Separates editor and frontend styles and processes them in isolation, keeping the stylesheet size on the frontend to a minimum
+-   Removes the preflight and global Tailwind styles/animation presets so that there isn't a conflict with other blocks, plugins, etc.
+-   On frontend styles, padding and margins will only be applied if the block doesn't have inline styling (e.g. `.p-4:not([style*="padding"])`). This lets you define a default while letting users override these values. Open an issue for more info.
+
+Read more about Tailwind CSS: https://tailwindcss.com/
+
+### Cypress e2e testing
+
+Cypress is a CLI test runner as well as an interactive one. Essentially it will run your tests through a browser, clicking here or there as you tell it to. It has an intuative API and is easy to learn. I've included some helpers to get started with WordPress, such as `cy.loginUser()` and `cy.visitNewPageEditor()`
+
+Read more about Cypress: https://www.cypress.io/

cypress.json

@@ -0,0 +1 @@
+{}

cypress/constants.js

@@ -0,0 +1,3 @@
+export const SERVER_URL = 'http://localhost:8888'
+export const BLOCK_CONTAINER =
+    '.is-root-container.block-editor-block-list__layout'

cypress/integration/sanity-checks.spec.js

@@ -0,0 +1,11 @@
+// Check support/globals.js for some default checks
+// as well as start up and clean up methods
+context('Block checks', () => {
+    it('Adds the block', () => {
+        cy.addBlock('rust-starter')
+        // Check the loading text is gone.
+        // cy.getPostContent().contains('Loading').should('not.exist')
+        // Check the block is there
+        cy.getPostContent('.wp-block[class$="rust-starter"]').should('exist')
+    })
+})

cypress/plugins/index.js

@@ -0,0 +1,3 @@
+module.exports = () => {
+    // https://docs.cypress.io/plugins/directory
+}